jQuery implements click button mask pop-up dialog box (imitation of Tmall's delete dialog box)_jquery

When we are shopping on Tmall, we often encounter that after clicking the delete button or the login button, a dialog box pops up asking you whether to delete or a login dialog box pops up, and we can also see the information from our previous page, just click No, there will be corresponding changes only after operating on the dialog box. The screenshot is as follows (taking Tmall as an example)

As shown in the picture, the above is the rendering of Tmall. In fact, this is achieved through jQuery, and the implementation process is not very complicated, then Now let us take a look at the implementation process.

First is the layout part of the page: delete.html

Copy the code The code is as follows:

This is a record that can be deleted

< div class="mask">

Prompt when deleting

You really want to delete This record?

< ;/div>

It should be noted that I only added one record, but it can actually simulate multiple Deletion of records. Here we have a three-layer div structure, of which mask and dialog enable us to trigger it through jquery. Next, let’s talk about the layout of css. First, the code: delete.html

Copy the code The code is as follows:

@CHARSET "UTF-8";
*{
margin: 0px;
padding: 0px;

}
.divShow{
line-height: 32px;
height: 32px;
background-color: #eee;
width: 280px;
padding -left: 10px;
}



.dialog{
width: 360px;
border: 1px #666 solid;
position: absolute;
display: none;
z-index: 101; // Ensure that this layer is displayed at the top
}

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

}

.dialog .title img{
float:right;
}

.dialog .content{

background: #fff;
padding: 25px;
height: 60px;
}

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

}


.dialog .bottom{

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

.mask{

width: 100%;
height: 100%;
background: #000;
position: absolute;
top: 0px;
left: 0px;
display: none;
z-index: 100;

}
.btn{

border: #666 1px solid;
width: 65px;

}

In the CSS file, what I need to focus on is the use of z-index. The z-index represents the stacking order of the layers. If the value is higher, it means that it is displayed on the upper layer. The z-index of the mask is 100. The z-index of the dialog is 100. The z-index is 101. The reason why the value is large enough is to ensure that it is absolutely displayed at the top level. The display of the div layer can be controlled by increasing the value.

The next step is the most important js code. Of course, when using jquery, we need to import the jquery package:

delete.js

Copy code The code is as follows:

$(function(){

//Bind the trigger event of the delete button
$("#button1").click(function(){

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

/*
* Set the TOP and left of the prompt dialog box according to the position of the current page on the scroll bar
*/
function showDialog(){
var objw= $(window);//Current window
var objc=$(".dialog");//Current dialog box
var brsw=objw.width();
var brsh=objw.height( );
var sclL=objw.scrollLeft();
var sclT=objw.scrollTop();
var curw=objc.width();
var curh=objc.height();
//Calculate the left margin when the dialog box is centered
var left=sclL (brsw -curw)/2;
var top=sclT (brsh-curh)/2;

/ /Set the dialog box to center
objc.css({"left":left,"top":top});

}

//Triggered when the page window size changes Event
$(window).resize(function(){

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

//Register the close image click event
$(".title img").click(function(){

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

});
//Cancel button event
$( "#noOk").click(function(){
$(".dialog").hide();
$(".mask").hide();
});

//OK button leave
$("#ok").click(function(){

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

if($("input:checked").length !=0){
//Note that there cannot be a space in the middle of the filter selector $("input :checked") This is wrong

$(".divShow").remove();//Delete a certain piece of data
}

});


});

It should be noted that the main agent is showDialog() for dynamic confirmation dialog box Show location.