js遮罩弹窗

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

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

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

具体代码如下:

css如下:

[css]  view plain copy
  1. <style type="text/css">  
  2.     #btn1{  
  3.         position:fixed;  
  4.         right:0;  
  5.         bottom:0;  
  6.     }  
  7.     #div1{  
  8.         width:300px;  
  9.         height:100px;  
  10.         background-color:red;  
  11.         position:absolute;  
  12.         display:none;  
  13.         left:0;  
  14.         top:0;  
  15.         z-index:2;  
  16.     }  
  17.     #mask{  
  18.         display:none;  
  19.         position:absolute;  
  20.         background-color:black;  
  21.         filter:alpha(opactiy=20);  
  22.         opacity:0.2;  
  23.         z-index:1;  
  24.     }  
  25. </style>  
HTML代码如下:

[html]  view plain copy
  1. <body style="height:2000px; width:3000px;">  
  2.     <input type="button" value="弹出" id="btn1" />  
  3.     <div id="div1"><input type="button" value="关闭" id="close" /></div>  
  4.     <div id="mask"></div>  
  5. </body>  

js代码如下:

[javascript]  view plain copy
  1. $(function () {  
  2.     var $win = $(window),  
  3.             $div = $('#div1'),  
  4.             $mask = $('#mask'),  
  5.             $close = $('#close'),  
  6.             flag = false;  
  7.   
  8.   
  9.     $('#btn1').click(function () {                  
  10.         var clientH = $win.height(),  
  11.             clientW = $win.width(),  
  12.             divH = $div.height(),  
  13.             divW = $div.width();  
  14.         var t = (clientH - divH) / 2 + $win.scrollTop();  
  15.         var l = (clientW - divW) / 2 + $win.scrollLeft();  
  16.         $div.css('display''block').offset({ 'top': t, 'left': l });  
  17.   
  18.         $mask.show().css({ width: clientW + 'px', height: clientH + 'px' }).offset({ left: $win.scrollLeft(), top: $win.scrollTop() });  
  19.         flag = true;  
  20.   
  21.         $close.click(function () {  
  22.             flag = false;  
  23.             $div.hide();  
  24.             $mask.hide();  
  25.         });  
  26.   
  27.   
  28.         $(window).scroll(setMask).resize(setMask);  
  29.   
  30.         function setMask() {  
  31.             if (flag) {  
  32.                 $div.css('display''block').offset({ 'top': ($win.height() - $div.height()) / 2 + $win.scrollTop(), 'left': ($win.width() - $div.width()) / 2 + $win.scrollLeft() });  
  33.                 $mask.show().css({ width: clientW + 'px', height: clientH + 'px' }).offset({ left: $win.scrollLeft(), top: $win.scrollTop() });  
  34.             } else {  
  35.                 $div.hide();  
  36.                 $mask.hide();  
  37.             }  
  38.         }  
  39.     });              
  40. });  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值