使用jQuery实现遮罩效果的代码（调试版）

浏览数：45 / 时间：2015年06月09日

参考资料：陶国荣著《jQuery权威指南》P107之4.8综合案例分析——删除数据时的提示效果在项目中的应用

说明：本版本为调试版，是因为增加了很多调试过程中产生的边框。

外部引入文件有：jQuery库文件和两张图片。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>删除记录时的提示效果</title>
        
        <style type="text/css">
            body{
                font-size: 13px;
            }
            
            .divShow{
                
                line-height: 32px;
                /*该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。*/
                height: 32px;
                background-color: #eee;
                width: 280px;
                
            }
            
            .divShow span{
                border:1px red solid;
                padding-left: 50px;
            }
            
            .dialog{
                width: 360px;
                border: 5px solid #666;
                position: absolute;/*设置成绝对定位，未知作用*/
                display: none;/**/
                z-index: 101;
            }
            
            
            
            
            
            
            
            
            
            
            
            .dialog .title{
                border: 1px solid #0f0;
                background-color: #fbaf15;
                padding: 10px;/*撑开了div的宽度和高度*/
                color: #fff;/*字体颜色为白色*/
                font-weight: bolder;/*加粗*/
            }
            
            .dialog .title img{
                float: right;
            }
            
            
            
            
            
            .dialog .content{
                background: #fff;
                padding: 25px;/*撑开了上下左右的距离*/
                height: 60px;
            }
            
            .dialog .content img{
                float: left;
            }
            
            .dialog .content span{
                float: left;
                border:1px solid #FF0000;
                padding-top: 10px;
                padding-left: 10px;
            }
            
            
            
            .dialog .buttom{
                background-color:#eee;
                text-align: right;/*把按钮也向右靠齐了*/
                padding: 10px 10px 10px 0px;
            }
            
            
            .mask{
                border:1px solid #0f0;
                background-color: #f00;
                display:none;
                width: 100%;
                height: 100%;
                position: absolute;/*设置了绝对定位以后，高度占满了整个页面*/
                top: 0px;/*设置了绝对定位以后，top值才会有效*/
                left: 0px;
            }
            
            
            
            
        </style>
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
        
        <script type="text/javascript">
            
            $(function(){
                $("#button1").click(function(){
                    $(".mask").show();
                    showDialog();
                    $(".dialog").show();
                });
                
                
                
                
                // 当调整浏览器窗口的大小时，发生 resize 事件。
                $(window).resize(function(){
                    var flag = $(".dialog").is(":visible");
                    // alert(flag);
                    if(!flag){
                        return;
                    }
                    showDialog(); //重新显示对话框
                });
                
                
                
                // 关闭事件(实现功能：当点击关闭图片的时候，遮罩层和对话框都消失)
                $(".title img").click(function(){
                    $(".dialog").hide();
                    $(".mask").hide();
                });
                
                // 注册取消按钮点击事件
                $("#button3").click(function(){
                    $(".dialog").hide();
                    $(".mask").hide();
                });
                
                // 注册确定按钮点击事件
                $("#button2").click(function(){
                    $(".dialog").hide();
                    $(".mask").hide();
                    
                    
                    var length = $("input:checked").length;
                    if(length!=0){
                        $(".divShow").remove();
                    }
                    
                    
                });
                
                
            });
            
            
            function showDialog(){
                var objW = $(window); // 当前窗口
                var objC = $(".dialog"); // 对话框
                var brsW = objW.width(); // 当前用户的浏览器窗口的宽度
                var brsH = objW.height(); // 当前用户的浏览器窗口的高度
                //alert(brsW + "," + brsH);
                var sclL = objW.scrollLeft();//返回第一个匹配元素的水平滚动条位置。这里要查文档。
                var sclT = objW.scrollTop();
                var curW = objC.width();
                var curH = objC.height();
                // alert(sclL + "," + sclT);
                // alert(curW + "," + curH);
                
                
                // 设置左边距和上边距使得对话框居中（最关键的地方）
                var left = sclL + (brsW-curW)/2;
                var top = sclT + (brsH-curH)/2;
                objC.css(
                    {
                        "left":left,
                        "top":top
                    }
                );
                
            }
        </script>
        
        
        <meta name="author" content="Administrator" />
        <!-- Date: 2014-08-24 -->
    </head>
    <body>
        <div class="divShow">
            <input type="checkbox" id="checkbox1"/>
            <a href="#">这是一条可以删除的记录</a>
            <span>
                <input type="button" id="button1" value="删除" class="btn" />
            </span>
        </div>
        
        <div class="mask">
            这是隐藏的遮罩层
        </div>
        
        
        
        <div class="dialog">
            <!--
                对话框里面有三层div，标题层，内容层，按钮层                
                -->
            <div class="title" style="border: 1px solid #f00">
                <img src="images/close.gif" alt="点击可以关闭" />删除时候提示
            </div>
            <div class="content" style="border: 1px solid #0f0">
                <img src="images/delete.jpg"  /><span>您真的要删除该记录吗？</span>
            </div>
            <div class="buttom" style="border: 1px solid #00f">
                <input type="button" id="button2" value="确定" />&nbsp;&nbsp;
                <input type="button" id="button3" value="取消" />
            </div>
        </div>
        
    </body>
</html>