jquery实现遮罩层效果

在工作中前端页面有时需要点击按钮弹框显示某些信息，会用到遮罩层效果样式，在这里记录一下，以后备用。

css代码：

	/*遮罩层*/
    div#mask{
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 100;
        filter: alpha(opacity=30);
        opacity: 0.3;
        display: none;
        background-color: #000;
    }
    /*对话框*/
    div#dialog,div#dialog2{
        border: 3px solid #d2e3f3;
        width: 1060px;
        height: 450px;
        position: fixed;     /*fixed; 固定定位*/
        z-index: 101;
        display: none;
        background-color: #fff;
    }

html代码：

	<%--豁免项对话框--%>
    <div id="dialog" class="panel panel-success " >
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-eye-open"></span> Waived</strong>
            <span style="font-weight: bold;font-size: 14px;display: inline-block;float: right;cursor: pointer;" onclick="hideMask()">Close</span>
        </div>
        <div class="panel-body" >
            <table class="table talbe-condensed table-bordered">
                <thead>
                    <tr class="head_color">
                        <th width="70%">status</th>
                        <th width="10%">mtk-project</th>
                        <th width="20%">waived</th>
                    </tr>
                </thead>
                <tbody id="table_tbody">
                </tbody>
            </table>
        </div>
    </div>
    
	<%--遮罩层--%>
    <div id="mask" ></div>

js代码：

	// 显示豁免项信息
    function waivedClick(status,mtk,waived) {
        showMask();		//显示遮罩层
        setDialog();	//设置对话框的位置
        $("#dialog").show();	//显示对话框

        $("#table_tbody").empty();
        var $tr = $("<tr></tr>");
        $tr.css("background-color","#d4e9a9");
        $tr.append("<td>"+status+"</td>");
        $tr.append("<td>"+mtk+"</td>");
        $tr.append("<td>"+waived+"</td>");
        $("#table_tbody").append($tr);

    }
	//关闭弹出层
    function hideMask()
    {
        $("#mask").hide();
        $("#dialog").hide();
        $("#dialog2").hide();
    };

    //设置豁免项对话框的位置
    function setDialog(){
        var widW = $(window).width();   //获取浏览器窗口的宽度
        var widH = $(document).height();  //获取浏览器窗口的高度
        var $dobj = $("div#dialog");	//当前提示框
        var didW = $dobj.width();	//当前提示框的宽度
        var didH = $dobj.height();	//当前提示框的高度
        console.log(widH);
        //计算对话框居中时的左边框
        var left = (widW-didW)/2;
        //计算对话框居中时的上边框
        // var top = (widH-didH)/2-4050;
        var top = 100;
        console.log(left+"---"+top);
        $dobj.css({"left":left,"top":top});
    }    
	/*设置遮罩层的大小并显示*/
    function showMask(){
        var bh = $("body").height();	//获取当前内容的高度
        var bw = $("body").width();		//获取当前内容的宽度

        console.log(bw+"==="+bh)
        $("div#mask").css({
            width:bw+"px",
            height:bh+"px",		//设置遮罩层的高度,覆盖整个页面的内容
            display:"block"
        });
    }