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.
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
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:
/* * 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(){
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn