jquery Implementation Mask Pop-up dialog box (Delete dialog box for imitation Tmall)

When we are shopping in the Tmall, often encounter click delete button or login button, pop-up dialog asks you whether to delete or pop up a login dialog box, and we can also see our previous page information, is not clickable, only the dialog box to operate only after the corresponding changes. The screenshot is as follows (with Tmall as an example)

As the picture shows, the above is the day cat effect diagram, in fact, this is achieved through jquery, and the implementation process is not very complex, so now let's look at the implementation of the process.

The first is the layout part of the page: delete.html

<! DOCTYPE html> To illustrate, I've only added a single record that can actually simulate the deletion of multiple records. Here we have a three-layer div structure, where mask and dialog let us trigger through jquery, next we talk about the layout of the CSS, first on the code: 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;//guarantees 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 represents the stacking order of the layer, if the higher the value, the more the upper display, Mask Z-index is 100,dialog Z-index is 101, The reason that the values are large enough is to guarantee absolute display at the top level, and the display of the div layer can be controlled by the increment of the value.

Next is the most important JS code, of course, when using jquery, we want to import jquery package: <script type= "Text/javascript" src= ". /js/jquery-1.10.2.js "></script>

Delete.js


$ (function () {///BIND Delete button trigger event $ ("#button1"). Click (function () {$ (". Mask"). CSS ("opacity", "0.3"). Show ();
		ShowDialog ();
	$ (". Dialog"). Show ();
	
	}); /* * Set the top and left */function ShowDialog () {var objw=$ (window) of the prompt dialog box according to the current page's position in the scroll bar,///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;
			
	The Settings dialog box is centered objc.css ({"Left": Left, "Top": Top});
		}//The event that is triggered when the page window size changes (window). Resize (function () {if (!$ (". Dialog"). Is (": visible") {return;
	} showDialog ();
	
	});
		Register to close the picture Click event $ (". Title img"). (function () {$ (". Dialog"). Hide ();
		
	$ (". Mask"). Hide ();
	});
		Cancels the 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 filter selector cannot exist in the middle of a space $ ("input:checked") This is the wrong $ (". Divshow"). Remove ();//delete a piece of data}
	
	
});																		 });
 

It is important to note that the main generation is the ShowDialog () for dynamic determination of the display location of the dialog box.