Maison >interface Web >js tutoriel >jQuery implémente la boîte de dialogue contextuelle du masque de bouton de clic (imitation de la boîte de dialogue de suppression de Tmall)_jquery

jQuery implémente la boîte de dialogue contextuelle du masque de bouton de clic (imitation de la boîte de dialogue de suppression de Tmall)_jquery

WBOYoriginal: 2016-05-16 16:52:551329parcourir

Lorsque nous faisons des achats sur Tmall, nous rencontrons souvent une boîte de dialogue qui apparaît vous demandant si vous souhaitez supprimer ou une boîte de dialogue de connexion qui apparaît après avoir cliqué sur le bouton Supprimer ou le bouton de connexion, et nous pouvons également voir les informations de notre précédente page en cliquant sur Non, les modifications correspondantes ne seront apportées qu'après avoir opéré dans la boîte de dialogue. La capture d'écran est la suivante (en prenant Tmall comme exemple)
jQuery implémente la boîte de dialogue contextuelle du masque de bouton de clic (imitation de la boîte de dialogue de suppression de Tmall)_jquery
Comme le montre l'image, ce qui précède est le rendu de Tmall. En fait, cela est réalisé via jQuery, et le processus d'implémentation ne l'est pas. très compliqué, alors jetons maintenant un coup d'œil au processus de mise en œuvre.

D'abord la partie mise en page de la page : delete.html

Copiez le code Le code est le suivant :

;meta http -equiv="mots-clés" content="mot-clé1,mot-clé2,mot-clé3">
-equiv= "content-type" content="text/html; charset=UTF-8">

Ceci est un enregistrement qui peut être supprimé

Invite lors de la suppression

div class=" content">

voulez-vous vraiment supprimer cet enregistrement ?

;/div>

Il est à noter que je n'ai ajouté qu'un seul enregistrement, mais il peut en fait simuler plusieurs suppressions. de dossiers. Nous avons ici une structure div à trois couches, parmi lesquelles le masque et la boîte de dialogue nous permettent de la déclencher via jquery. Parlons ensuite de la disposition du CSS : commençons par le code : delete.html

Copiez le code

Le code est le suivant :

@CHARSET "UTF-8"
*{
marge : 0px ;
remplissage : 0px ;

}
.divShow{

hauteur de la ligne : hauteur : 32px couleur de fond : #eee ; largeur : 280px ; remplissage -gauche : 10px ; }

.dialog{
largeur : 360px ; solid;
position : absolue ;
affichage : aucun ;
z-index : 101;//Assurez-vous que ce calque est affiché en haut
}

.dialog .title {
background:#fbaf15;
padding : 10px;
color: #fff;
font-weight: bold

}

.dialog .title; img{
float:right;
}

.dialog .content{

arrière-plan :
remplissage : 25px
hauteur : 60px ; 🎜>}

.dialog .content img{
float : gauche
}
.dialog .content span{
float : gauche
padding : 10px ; 🎜>
}

.dialog .bottom{

text-align: right;
padding: 10 10 10 0
background: #eee;
}

.mask{

largeur : 100 % ;
hauteur : 100 %
arrière-plan : #000 ; haut : 0px ;
gauche : 0px ;
affichage : aucun
z-index : 100 ;

}
.btn{

bordure : #666 ; 1px solide ;
largeur : 65px

}

Dans le fichier CSS, ce sur quoi je dois me concentrer est l'utilisation du z-index. Le z-index représente l'ordre d'empilement des calques. Si la valeur est plus élevée, cela signifie qu'elle est affichée sur le calque supérieur. . L'index z du masque est 100. L'index z de la boîte de dialogue est 100. L'index z est 101. La raison pour laquelle la valeur est suffisamment grande est de garantir qu'elle est absolument affichée au niveau supérieur. l'affichage de la couche div peut être contrôlé en augmentant la valeur.

L'étape suivante est le code js le plus important. Bien sûr, lors de l'utilisation de jquery, nous devons importer le package jquery :

delete.js

Copier le code Le le code est le suivant :

 
$(function(){ 

//Lier l'événement déclencheur du bouton de suppression
$("#button1").click(function (){ 

$(".mask").css("opacity","0.3").show(); 
showDialog(); 
$(".dialog"). show(); 
} ); 

/* 
* Définit le HAUT et la gauche de la boîte de dialogue d'invite en fonction de la position de la page actuelle sur la barre de défilement 
*/ 
function showDialog(){ 
var objw= $(window);//Fenêtre actuelle
var objc=$(".dialog");//Boîte de dialogue actuelle
var brsw=objw.width (); 
var brsh=objw.height( ); 
var sclL=objw.scrollLeft(); 
var sclT=objw.scrollTop(); ; 
var curh=objc.height(); 
//Calculer la marge gauche lorsque la boîte de dialogue est centrée
var left=sclL (brsw -curw)/2 
var top=sclT; (brsh-curh)/2; 

/ /Placer la boîte de dialogue au centre 
objc.css({"left":left,"top":top}); } 

//Déclenché lorsque la taille de la fenêtre de la page change Event
$(window).resize(function(){ 

if(!$(".dialog").is( ":visible")){ 
return; 
} 
showDialog(); 
}); 

//Enregistrer l'événement de clic de fermeture d'image 
$(". title img").click(function(){ 

$(".dialog").hide(); 
$(".mask").hide(); 

 }); 
//Annuler l'événement du bouton
$( "#noOk").click(function(){ 
$(".dialog").hide(); 
$(". masque").hide(); 
}); 

//OK bouton quitter
$("#ok").click(function(){ 

$( ".dialog").hide(); 
$(" .mask").hide(); 

if($("input:checked").length !=0){ 
//Notez qu'il ne peut pas y avoir d'espace au milieu du sélecteur de filtre $("input :checked") C'est faux 

$(".divShow").remove();//Supprimer un certaine donnée
} 

}); 


}); 🎜>Il convient de noter que l'agent principal est showDialog() pour la boîte de dialogue de confirmation dynamique Afficher l'emplacement.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

jQuery implémente la boîte de dialogue contextuelle du masque de bouton de clic (imitation de la boîte de dialogue de suppression de Tmall)_jquery

Articles Liés