jQuery实现遮罩弹出对话框（仿天猫的删除对话框）

来源：互联网发布：80后和90后的区别知乎编辑：程序博客网时间：2024/04/30 16:50

地址：http://blog.csdn.net/zzjmay/article/details/23351229

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

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

首先是页面的布局部分：delete.html

[html] view plaincopyprint?
<!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

[css] view plaincopyprint?
@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

[javascript] view plaincopyprint?
$(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">                                                                       </span>  

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

0 0