JQuery click button mask popup dialog box of of imitation Tmall delete dialog box

  • 2020-03-30 02:36:37
  • OfStack

We in Tmall shopping, often encounter after click the delete button or login button, the pop-up dialog asking whether you delete or pop up a login dialog box, and we also can see our previous page of information, is click no, only after operation on the dialog box has a corresponding change. The screenshot is shown below (take Tmall as an example)  
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/201404101548342.gif? 2014310155225 ">  
As shown in the figure, above is the effect of Tmall, in fact, this is achieved through jQuery, and the implementation process is not very complex, so now let's see the implementation process.

The first is the layout part of the page: delete.html
 
<!DOCTYPE html> 
<html> 
<head> 
<title> Mask the pop-up window </title> 

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

<link rel="stylesheet" type="text/css" href="../css/delete.css"> 
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="../js/delete.js"></script> 

</head> 

<body> 
<div class="divShow"> 
<input type="checkbox" id="chexkBox1"> <a href="#"> This is a record that can be deleted </a> 
<input id="button1" type="button" value=" delete " class="btn"> 


</div> 


<div class="mask"></div> 
<div class="dialog"> 
<div class="title"> 
<img alt=" Click to close " src="../images/delete.gif" width="30px" height="30px;"> 
 Prompt for deletion  
</div> 
<div class="content"> 
<img alt="" src="../images/delete.gif" width="60px" height="60px"> 
<span> Do you really want to delete this record? </span> 

</div> 
<div class="bottom"> 
<input type="button" id="ok" value=" determine " class="btn"> 
<input type="button" id="noOk" value=" cancel " class="btn"> 

</div> 
</div> 

</body> 
</html> 

To be clear, I only added one record, which can simulate the deletion of multiple records. Here we have a three-layer div structure, in which the mask and dialog are triggered by jquery. Next, we will talk about the layout of CSS. The code is delete.html
 
@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;//Make sure the 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, I need to emphasize the use of z-index. Z-index represents the stacking order of layers. If the value is higher, it will be displayed in the upper layer.

Next is the main js code, of course, when using jquery, we will import the jquery package: < The script type = "text/javascript" SRC = ".. / js/jquery - 1.10.2. Js "> < / script>

Delete. Js
 
$(function(){ 

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

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

 
function showDialog(){ 
var objw=$(window);//The 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(); 
//Calculates the left margin when the dialog box is centered
var left=sclL+(brsw -curw)/2; 
var top=sclT+(brsh-curh)/2; 

//Center the Settings dialog box
objc.css({"left":left,"top":top}); 

} 

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

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

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

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

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

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

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

if($("input:checked").length !=0){ 
//Note that there cannot be a blank $("input :checked") in the filter selector

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

}); 


});<span style="white-space:pre"> 

It is important to note that the main proxy is showDialog (), which dynamically determines the display position of the dialog box.

Related articles: