弹出层带遮罩显示在屏幕正中间

最近项目中用到了遮罩层,在这里总结下以备下次使用。

首先,遮罩应全屏,同时需要兼容多种浏览器,需要设置div的样式为: 

复制代码
 1   position:absolute;
 2   top:0%; /**遮罩全屏top,left都为0,width,height为100%**/
 3   left:0%; 
 4   width:100%; 
 5   height:100%; 
 6   filter:alpha(opacity=50);
 7   opacity: 0.5; 
 8   -moz-opacity:0.5; 
 9   -khtml-opacity: 0.5;  
10   background-color:black;
11   z-index: 1001;  
12   display:none;
复制代码

然后,设置弹出层显示在屏幕正中间:

1   //让指定的DIV始终显示在屏幕正中间
2   function funShowDivCenter(div) {
3      var top = ($(window).height() - $(div).height()) / 2;
4      var left = ($(window).width() - $(div).width()) / 2;
5      var scrollTop = $(document).scrollTop();
6      var scrollLeft = $(document).scrollLeft();
7      $(div).css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
8   }

最后,应注意在弹出层中不能设置元素的padding值,否则将不会显示在屏幕正中间。

效果图:

 

Demo下载



感谢您的阅读,如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮。本文欢迎各位转载,但是转载文章之后必须在文章页面中给出作者和原文连接

posted on   Flare-Moon  阅读(7444)  评论(0编辑  收藏  举报

< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

统计

点击右上角即可分享
微信分享提示