如图所示,上面就是天猫的效果图,其实这就是通过jQuery实现的,并且实现的过程也不是很不复杂,那么现在就让我们来看看实现的过程吧。

首先是页面的布局部分:delete.html
Home > Web Front-end > JS Tutorial > jQuery implements click button mask pop-up dialog box (imitation of Tmall's delete dialog box)_jquery

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

WBOY
Release: 2016-05-16 16:52:55
Original
1311 people have browsed it

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)
jQuery implements click button mask pop-up dialog box (imitation of Tmall's delete dialog box)_jquery
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:




mask popup















< div class="mask">



Click to OK Close
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.
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template