jQuery implementiert das Popup-Dialogfeld „Click-Button-Maske“ (Nachahmung des Löschdialogfelds von Tmall)_jquery

Wenn wir auf Tmall einkaufen, stoßen wir häufig auf ein Dialogfeld, in dem Sie gefragt werden, ob Sie etwas löschen möchten, oder auf ein Anmeldedialogfeld, das nach dem Klicken auf die Schaltfläche „Löschen“ oder „Anmelden“ angezeigt wird, und wir können auch die Informationen aus unserem vorherigen sehen Wenn Sie auf der Seite auf „Nein“ klicken, werden die entsprechenden Änderungen erst nach der Bearbeitung des Dialogfelds vorgenommen. Der Screenshot sieht wie folgt aus (am Beispiel von Tmall)

Wie im Bild gezeigt, handelt es sich bei dem obigen um das Rendering von Tmall. Tatsächlich wird dies durch jQuery erreicht, der Implementierungsprozess jedoch nicht Sehr kompliziert, also werfen wir nun einen Blick auf den Implementierungsprozess.

Zuerst ist der Layoutteil der Seite: delete.html

Kopieren Sie den Code Der Code lautet wie folgt :

< ;meta http -equiv="keywords" content="keyword1,keyword2,keyword3"> -equiv= "content-type" content="text/html; charset=UTF-8">

Dies ist ein Datensatz, der gelöscht werden kann

>

„Zum Schließen klicken“ src="../images/delete.gif" width="30px" height="30px;"> Aufforderung beim Löschen

div class=" content">
Möchten Sie diesen Datensatz wirklich löschen?

;/div>




Es sollte beachtet werden, dass ich nur einen Datensatz hinzugefügt habe, aber es kann tatsächlich mehrere Löschvorgänge simulieren von Aufzeichnungen. Hier haben wir eine dreischichtige Div-Struktur, zwischen der Maske und Dialog es uns ermöglichen, sie über jquery auszulösen. Als nächstes sprechen wir über das Layout von CSS. Beginnen wir mit dem Code: delete.html




Kopieren Sie den Code


Der Code lautet wie folgt:


@CHARSET "UTF-8"*{
margin: 0px;
padding: 0px;
.divShow{
line-height: 32px;
background-color: #eee;
width: 280px;
padding -left: 10px; solid;

position: absolute;
display: none;//Stellen Sie sicher, dass diese Ebene oben angezeigt wird

.dialog .title { Hintergrund:#fbaf15; Farbe: #fff; Schriftstärke: fett; .dialog .title img{ float:right;

.dialog .content{

background: #fff;
height: 60px; 🎜>}

.dialog .content img{
float: left;
.dialog .content span{
padding: 10px

}


.dialog .bottom{

text-align: right;
background: #eee;
}

.mask{

Breite: 100%;
Hintergrund: #000;
oben: 0px;
links: 0px;
z-index: 100;

rand: #666 1px durchgezogen;
Breite: 65px>
}


In der CSS-Datei muss ich mich auf die Verwendung des Z-Index konzentrieren. Der Z-Index stellt die Stapelreihenfolge der Ebenen dar. Wenn der Wert höher ist, bedeutet dies, dass er auf der oberen Ebene angezeigt wird . Der Z-Index der Maske ist 100. Der Z-Index des Dialogs ist 101. Der Grund, warum der Wert groß genug ist, besteht darin, sicherzustellen, dass er absolut auf der obersten Ebene angezeigt wird Die Anzeige der Div-Ebene kann durch Erhöhen des Werts gesteuert werden.

Der nächste Schritt ist der wichtigste js-Code. Wenn wir jquery verwenden, müssen wir natürlich das jquery-Paket importieren:

delete.js

Code kopieren Die Der Code lautet wie folgt:

$(function(){

//Binde das Triggerereignis der Schaltfläche „Löschen“
$("#button1").click(function (){

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

/*
* Setzt den oberen und linken Rand des Eingabeaufforderungsdialogfelds entsprechend der Position der aktuellen Seite auf der Bildlaufleiste
*/
function showDialog(){
var objw= $(window);//Aktuelles Fenster
var objc=$(".dialog");//Aktuelles Dialogfeld
var brsw=objw.width ();
var brsh=objw.height( );
var sclL=objw.scrollTop();
var curw=objc.width() ;
var curh=objc.height();
//Berechnen Sie den linken Rand, wenn das Dialogfeld zentriert ist
var left=sclL (brsw -curw)/2;
var top=sclT (brsh-curh)/2;

/ /Stellen Sie das Dialogfeld auf die Mitte
objc.css({"left":left,"top":top}); }

//Wird ausgelöst, wenn sich die Größe des Seitenfensters ändert. Ereignis
$(window).resize(function(){

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

//Registrieren Sie das Ereignis zum Schließen des Bildes
$(". title img").click(function(){

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

});
//Button-Ereignis abbrechen
$( "#noOk").click(function(){
$(".dialog").hide();
$(". mask").hide();
});

//OK-Taste verlassen
$("#ok").click(function(){

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

if($("input:checked").length !=0){
//Beachten Sie, dass in der Mitte des Filterselektors kein Leerzeichen stehen darf $("input :checked") Das ist falsch

$(".divShow").remove();//Löschen a bestimmte Daten
}

});


}); 🎜>Es ist zu beachten, dass der Hauptagent showDialog() für das dynamische Bestätigungsdialogfeld „Standort anzeigen“ ist.