遮罩层效果-demo1

 

遮罩层效果，大家如果还有更好的实现方式，请多多赐教，(*^__^*) 嘻嘻……

 

CSS：

<style type="text/css">
        html{overflow: hidden;}
        *{margin: 0;padding: 0;}
        .mask-layer{position: absolute;top: 0px;left:0px;z-index: 9998;opacity:0.6;filter: alpha(opacity=50);background:#000;-moz-opacity:0.5;display: none;}
        .dialog-wp{display: none;width: 500px;position: absolute;z-index: 9999;background: #fff;border: 1px solid #ccc;}
        .dialog-close-wp{text-align: right;padding: 10px 20px;}
        .dialog-close{font-size: 20px;font-weight: bold;cursor: pointer;color:#888;width: 30px;height: 30px;display: inline-block;}
        .dialog-tlt,.dialog-cnt{margin: 20px;background: #eee;padding: 20px;}
        .show-mask,.nomal-cnt{width: 200px;text-align:center;border:1px solid #ccc;margin: 20px;}
        .show-mask{height: 30px;line-height: 30px;background: #eee;cursor: pointer;}
    </style>

HTML：

<div class="show-mask">点击我，显示遮罩</div>
    <div class="nomal-cnt">
        <p>遮罩</p>
        <p>遮罩</p>
        <p>遮罩</p>
        <p>遮罩</p>
        <p>遮罩</p>
    </div>
    <div class="dialog-wp">
        <div class="dialog-close-wp"><span class="dialog-close">X</span></div>
        <div class="dialog-tlt">
            遮罩效果-模仿网友
        </div>
        <div class="dialog-cnt">
            XHTML 是更严谨更纯净的 HTML 版本。 在 W3School 的 XHTML 教程中，您将学习 HTML 与 XHTML 之间的差异，以及 XHTML 的优势所在。 我们还将会为您展示将站点升级至 XHTML 的方法，以帮助您快速部署 XHTML 技术。 XHTML 已经成为优秀前端设计师和工程师的首选。现在开始学习 XHTML ！
        </div>
    </div>
    <div class="mask-layer"></div>

JAVASCRIPT:

<script type="text/javascript">
        $(".show-mask").click(function (){
            var mHeight = $(document).height();
            var mWidth = $(document).width();
            $(".mask-layer").css({
                "height":mHeight+'px',
                "width":mWidth+'px'
            }).show();
            var dWidth = $(".dialog-wp").outerWidth();
            var dHeight = $(".dialog-wp").outerHeight();
            var dLeft = mWidth/2;
            var dTop = mHeight/2;
            $(".dialog-wp").css({
                "top":dTop,
                "left":dLeft,
                "margin-left":-(dWidth/2),
                "margin-top":-(dHeight/2)
            }).show("slow");
        });
        $(".dialog-close").click(function (){
            $(".mask-layer").hide();
            $(".dialog-wp").hide();
        })
    </script>