js遮罩弹窗

最新推荐文章于 2025-05-27 15:35:09 发布

原创最新推荐文章于 2025-05-27 15:35:09 发布 · 813 阅读

2 ·

CC 4.0 BY-SA版权

页面特效专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的点击按钮后弹出居中显示的图层，并配以遮罩层，确保图层始终位于窗口中央且用户无法与底层元素交互。代码示例中涉及CSS样式、jQuery操作，包括定位计算和滚动事件监听以保持图层位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

具体代码如下：

css如下：

[css]view plaincopy
<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代码如下：

[html]view plaincopy
<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代码如下：

[javascript]view plaincopy
$(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();  
            }  
        }  
    });              
});  