我们在天猫进行购物的时候，经常会碰到单击删除按钮或者登陆按钮后，弹出对话框问你是否删除或者弹出一个登陆对话框，并且我们也是可以看到我们之前页面的信息，就是点击不了，只有对对话框进行操作后才有相应的变化。截图如下（以天猫为例）
如图所示，上面就是天猫的效果图，其实这就是通过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">