码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-01-31 15:55:47      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

最近项目中用到了遮罩层,在这里总结下以备下次使用。 首先,遮罩应全屏,同时需要兼容多种浏览器,需要设置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值,否则将不会显示在屏幕正中间。

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

标签:

原文地址:http://www.cnblogs.com/mili3/p/4264133.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!