When we were shopping in the sky cat, often hit the click delete button or Login button, pop-up dialog box to ask you whether to delete or pop-up a login dialog box, and we can also see our previous page information, is not clicked, only the dialog box to operate after the corresponding changes. The screenshot is as follows (take the cat as an example)
As the picture shows, the above is the effect of the cat, in fact, this is achieved through jquery, and the implementation of the process is not very complicated, so now let's look at the implementation of the process.
First is the Layout section of the page: delete.html
Copy Code code as follows:
<! DOCTYPE html>
<title> Mask Pop-up window </title>
<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This are 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>
<body>
<div class= "Divshow" >
<input type= "checkbox" id= "ChexkBox1" > <a "#" > 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" >
prompt when deleting
</div>
<div class= "Content" >
<span> do you really want to delete this record? </span>
</div>
<div class= "Bottom" >
<input type= "button" id= "OK" value= "OK" class= "BTN" >
<input type= "button" id= "NoOk" value= "Cancel" class= "BTN" >
</div>
</div>
</body>
What needs to be explained is that I only added one record, which can actually simulate the deletion of multiple records. Here we have a three-layer div structure, where mask and dialog enable us to trigger through jquery, and next we'll talk about the layout of the CSS, first code: delete.html
Copy Code code 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 the layer is displayed on 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 highlight the use of Z-index, z-index the stacking order of the layers, if the higher the number, the more on the top display, mask Z-index is 100,dialog Z-index is 101, The reason the number is large enough is to ensure absolute display at the top level, through the increase in the number of values can control the div layer display.
Next is the most important JS code, of course, when using jquery, we want to import the jquery package: <script type= "Text/javascript" src=. /js/jquery-1.10.2.js "></script>
Delete.js
Copy Code code as follows:
$ (function () {
Trigger event for Binding Delete button
$ ("#button1"). Click (function () {
$ (". Mask"). CSS ("opacity", "0.3"). Show ();
ShowDialog ();
$ (". Dialog"). Show ();
});
/*
* Set top and left of the prompt dialog box based on the current page's position in 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 ();
Calculates 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 centered
Objc.css ({' Left ': Left, ' top ': top});
}
Events that are triggered when the page window size changes
$ (window). Resize (function () {
if (!$ (". Dialog"). Is (": visible")) {
Return
}
ShowDialog ();
});
Register Close Picture 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 There can be no space $ ("input:checked") in the middle of the filter selector this is wrong
$ (". Divshow"). Remove ()//delete a piece of data
}
});
}); <span style= "White-space:pre" >
It is important to note that the main generation is the ShowDialog () for dynamic determination of the location of the dialog box.
