jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)

前端技术 2023/08/09 JavaScript
我们在天猫进行购物的时候，经常会碰到单击删除按钮或者登陆按钮后，弹出对话框问你是否删除或者弹出一个登陆对话框，并且我们也是可以看到我们之前页面的信息，就是点击不了，只有对对话框进行操作后才有相应的变化。截图如下（以天猫为例） 
 
如图所示，上面就是天猫的效果图，其实这就是通过jQuery实现的，并且实现的过程也不是很不复杂，那么现在就让我们来看看实现的过程吧。

首先是页面的布局部分：delete.html
复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<title>遮罩弹出窗口</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=\"#\">这是一条可以删除的记录</a>
<input id=\"button1\" type=\"button\" value=\"删除\" class=\"btn\">


</div>


<div class=\"mask\"></div>
<div class=\"dialog\">
<div class=\"title\">
<img alt=\"点击可以关闭\" src=\"../images/delete.gif\" width=\"30px\" height=\"30px;\">
删除时提示
</div>
<div class=\"content\">
<img alt=\"\" src=\"../images/delete.gif\" width=\"60px\" height=\"60px\">
<span>你真的要删除这条记录吗？</span>

</div>
<div class=\"bottom\">
<input type=\"button\" id=\"ok\" value=\"确定\" class=\"btn\">
<input type=\"button\" id=\"noOk\" value=\"取消\" class=\"btn\">

</div>
</div>

</body>
</html>

需要做出说明的是，我只添加了一条记录，其实可以模拟多条记录的删除。这里我们有三层div结构，其中mask和dialog使我们通过jquery进行触发的，接下来我们讲下css的布局，先上代码：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;//保证该层在最上面显示
}

.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;

}

在CSS文件中，我需要着重说明的是z-index的使用，z-index表示的层的堆叠顺序，如果数值越高，表示越在上层显示，mask的z-index是100，dialog的z-index是101，数值足够大的原因就是保证绝对在顶层显示，通过数值的调增可以控制div层的显示。

接下来就是最为主要的js代码，当然在使用jquery时，我们要导入jquery包：<script type=\"text/javascript\" src=\"../js/jquery-1.10.2.js\"></script>

delete.js
复制代码 代码如下:

$(function(){

//绑定删除按钮的触发事件
$(\"#button1\").click(function(){

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

/*
* 根据当前页面于滚动条的位置，设置提示对话框的TOP和left
*/
function showDialog(){
var objw=$(window);//当前窗口
var objc=$(\".dialog\");//当前对话框
var brsw=objw.width();
var brsh=objw.height();
var sclL=objw.scrollLeft();
var sclT=objw.scrollTop();
var curw=objc.width();
var curh=objc.height();
//计算对话框居中时的左边距
var left=sclL+(brsw -curw)/2;
var top=sclT+(brsh-curh)/2;

//设置对话框居中
objc.css({\"left\":left,\"top\":top});

}

//当页面窗口大小改变时触发的事件
$(window).resize(function(){

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

//注册关闭图片单击事件
$(\".title img\").click(function(){

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

});
//取消按钮事件
$(\"#noOk\").click(function(){
$(\".dialog\").hide();
$(\".mask\").hide();
});

//确定按钮事假
$(\"#ok\").click(function(){

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

if($(\"input:checked\").length !=0){
//注意过滤器选择器中间不能存在空格$(\"input :checked\")这样是错误的

$(\".divShow\").remove();//删除某条数据
}

});


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

需要说明的是主要代买就是showDialog（）的用于动态的确定对话框的显示位置。

本文地址：https://www.stayed.cn/item/731

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案