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

更新时间：2014年04月10日 15:48:33 作者：

单击删除按钮或者登陆按钮后，弹出对话框问你是否删除或者弹出一个登陆对话框，本文使用jquery来实现这种效果，需要的朋友可以参考下

我们在天猫进行购物的时候，经常会碰到单击删除按钮或者登陆按钮后，弹出对话框问你是否删除或者弹出一个登陆对话框，并且我们也是可以看到我们之前页面的信息，就是点击不了，只有对对话框进行操作后才有相应的变化。截图如下（以天猫为例）

如图所示，上面就是天猫的效果图，其实这就是通过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（）的用于动态的确定对话框的显示位置。

您可能感兴趣的文章:

jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件HighCharts绘制2D饼图效果,结合完整实例形式分析了jQuery使用HighCharts插件绘制饼图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
2017-03-03
jQuery实现的简单悬浮层功能完整实例
这篇文章主要介绍了jQuery实现的简单悬浮层功能,结合完整实例形式分析了jQuery基于时间函数动态修改css样式实现窗口浮动效果的相关技巧,需要的朋友可以参考下
2017-01-01
jquery分页插件jquery.pagination.js实现无刷新分页
这篇文章主要介绍了jquery分页插件jquery.pagination.js实现无刷新分页的相关资料,需要的朋友可以参考下
2016-04-04
妙用Jquery的val()方法
Jquery的val()方法不仅能够设置元素的值，同时也能获取元素的值。常见的操作是对文本框的操作，比如判断邮箱地址等
2012-06-06
jQuery 文本框模拟下拉列表效果
学校作业的问题，就在网搜了一下，找不到文本框模拟的（可能本人RP问题），看到的都是用div的，结果就自己弄了一个，主要就是改变背景图片的位置，让div的位置放到文本框上面，没什么其它的东西，呵呵，见笑了
2010-02-02
最新28个很棒的jQuery 教程
jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择。今天的这篇文章收集了最新28个非常有用的 jQuery 教程分享给大家。
2011-05-05
jQuery开源组件BootstrapValidator使用详解
这篇文章主要为大家详细介绍了jQuery开源组件BootstrapValidator的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
jQuery+json实现动态创建复杂表格table的方法
这篇文章主要介绍了jQuery+json实现动态创建复杂表格table的方法,涉及jQuery针对json数据的解析与表格动态创建操作相关技巧,需要的朋友可以参考下
2016-10-10
jQuery实现checkbox的简单操作
这篇文章主要介绍了jQuery实现checkbox的简单操作，对复选框组的全选、全不选、不全选，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
jquery使用Cookie和JSON记录用户最近浏览历史
本文就是要利用cookie插件，获取用户浏览文章历史记录，并将用户最近浏览历史记录显示在页面，感兴趣的小伙伴们可以参考一下
2016-04-04