js弹出窗口和遮罩效果

来源：互联网发布：php自定义函数编辑：程序博客网时间：2024/05/16 02:02

在项目中，经常会用到一种效果就是，点击网页中某个元素时，可以弹出一个图层，这个图层无论是否有滚动条，还是滚动条是否滚动都要保持在当前窗口的正中央，同时在这个窗口的下面有一个遮罩层，使用户不能点击这个元素下面的元素。

具体代码如下：

css如下：

    <style type="text/css">        #btn1{            position:fixed;            right:0;            bottom:0;        }        #div1{            width:300px;            height:100px;            background-color:red;            position:absolute;            display:none;            left:0;            top:0;            z-index:2;        }        #mask{            display:none;            position:absolute;            background-color:black;            filter:alpha(opactiy=20);            opacity:0.2;            z-index:1;        }    </style>

HTML代码如下：

<body style="height:2000px; width:3000px;">    <input type="button" value="弹出" id="btn1" />    <div id="div1"><input type="button" value="关闭" id="close" /></div>    <div id="mask"></div></body>

js代码如下：

        $(function () {            var $win = $(window),                    $div = $('#div1'),                    $mask = $('#mask'),                    $close = $('#close'),                    flag = false;            $('#btn1').click(function () {                                var clientH = $win.height(),                    clientW = $win.width(),                    divH = $div.height(),                    divW = $div.width();                var t = (clientH - divH) / 2 + $win.scrollTop();                var l = (clientW - divW) / 2 + $win.scrollLeft();                $div.css('display', 'block').offset({ 'top': t, 'left': l });                $mask.show().css({ width: clientW + 'px', height: clientH + 'px' }).offset({ left: $win.scrollLeft(), top: $win.scrollTop() });                flag = true;                $close.click(function () {                    flag = false;                    $div.hide();                    $mask.hide();                });                $(window).scroll(setMask).resize(setMask);                function setMask() {                    if (flag) {                        $div.css('display', 'block').offset({ 'top': ($win.height() - $div.height()) / 2 + $win.scrollTop(), 'left': ($win.width() - $div.width()) / 2 + $win.scrollLeft() });                        $mask.show().css({ width: clientW + 'px', height: clientH + 'px' }).offset({ left: $win.scrollLeft(), top: $win.scrollTop() });                    } else {                        $div.hide();                        $mask.hide();                    }                }            });                    });