首页 > 代码库 > 弹出层带遮罩显示在屏幕正中间
弹出层带遮罩显示在屏幕正中间
最近项目中用到了遮罩层，在这里总结下以备下次使用。首先，遮罩应全屏，同时需要兼容多种浏览器，需要设置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值，否则将不会显示在屏幕正中间。
弹出层带遮罩显示在屏幕正中间
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。