菜单

在浏览器窗口上添加遮罩层的方法,实现遮罩居中弹出层

2019年8月3日 - 前端排行

如何在浏览器窗口上添加一个遮罩层

js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

背景
在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性。
但是,浏览器原生的弹窗函数(alert, confirm,
prompt)有着很大的局限性,主要是它们的展现UI一来很不美观,二来也不够灵活,因此,我们经常需要自行定义弹窗函数。
当我们要实现一个模式弹窗时(模式弹窗,即是说出现弹窗时,页面其它地方不可点击),通常的做法是用一个div将整个页面窗口遮挡住。
实现
下面,我们一步步地实现一种较为简洁有效的遮罩层:

复制代码 代码如下:

Step 1:
首先我们要考虑定义一个遮挡浏览器窗口的div,考虑下面一段html+css代码:
<div unselectable=”on”
style=”background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;”></div>
它可以实现遮挡浏览器窗口的功能,其中几个需要注意的css属性分别解释如下:
1)background:#000: 将div的背景色设置为黑色; filter:alpha(opacity=10):
在IE下,将div的透明度设置为0.1; opacity:.1:
在非IE下,将div的透明度设置为0.1
以上三个属性联合起来,实现了页面其余元素的“被挡住但可见”的效果。
2)left:0px;top:0px;position:fixed;height:100%;width:100%:
定义div的高度和宽度分别是浏览器高度和宽度的100%。这里有个小技巧,如果div的position是fixed或者absolute,那么当div的高度设置为百分比(例如100%)时,div的高度将参照浏览器可视区域(viewport)的高度来计算。此外,设置position为fixed,可以使得浏览器即使在scroll或resize时也保证遮罩层一直挡在页面的可视区域。
3)overflow:hidden 用来避免滚动条的出现。

<!doctype html>
<head>
<meta charset=”utf-8″ />
<title></title>
<style type=”text/css”>
*{}{margin:0;padding:0;}
html{}{_background:url(about:blank);} /**//* 阻止闪动 in IE6 ,
把空文件换成about:blank , 减少请求 */
body{}{background:#fff; font: 12px/1.5 Tahoma,Geneva, \\5b8b\\4f53,
sans-serif; height:100%;}
.wrap{}{height:980px; padding-top:20px;text-align:center;}
p{}{font-size:14px;text-align:center;line-height:24px;}
/**//** 遮罩层 **/
#masklayer{}{
background:#000;
display:none;
filter:alpha(opacity = 50);
opacity:0.5;
top:0;
left:0;
height:100%;
width:100%;
z-index:999;
position:fixed;
_position:absolute;
_left: expression(documentElement.scrollLeft +
documentElement.clientWidth – this.offsetWidth);
_top: expression(documentElement.scrollTop +
documentElement.clientHeight – this.offsetHeight);
}
/**//** 弹出层 **/
#popup{}{
display:none;
width:300px;
z-index:1000;
left:50%;
top:50%;
position:fixed!important;
margin-left:-150px !important;
_position:absolute;
_top:expression(eval(document.compatMode &&
document.compatMode==’CSS1Compat’)?
documentElement.scrollTop + (document.documentElement.clientHeight –
this.offsetHeight)/2: /**//*IE6*/
document.body.scrollTop + (document.body.clientHeight –
this.clientHeight)/2); /**//*IE5 IE5.5*/
}
.content{}{background:#f3f3f3;border:1px solid #999;}
.content
h3{}{background:#a0a0a0;color:#fff;font-size:14px;height:32px;line-height:32px;
padding-left:5px;}
#clickbtn{}{margin-top:20px;}
</style>
</head>
<body>
<div class=”wrap”>
<p>
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
<br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
<br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
<br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
<br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
</p>
<input type=”button” id=”clickbtn” value=”clike me” />
</div>
<div id=”masklayer”></div>
<div id=”popup”>
<div class=”content”>
<h3>我是弹出层 有没有居中?</h3>
<p>居中居中居中居中居中居中</p>
<p>居中居中居中居中居中</p>
<p>居中居中居中居中</p>
<p>居中居中居中</p>
</div>
</div>
<script type=”text/javascript”>
(function(masklayer){
var clickbtn = document.getElementById(‘clickbtn’);
clickbtn.onclick = function(){
var popup = document.getElementById(‘popup’);
masklayer.style.display=’block’;
popup.style.display =’block’;
var h = popup.clientHeight;
with(popup.style){
marginTop = -h/2+’px’;
}
}
})(document.getElementById(‘masklayer’))
</script>
</body>

Step 2:
细心的读者应该可以发现上述的css代码并不适用于IE
6,原因有两个:一来,IE6不支持position:fixed;二来,更重要的是,在IE
6中,height:100%不起作用,div的高度不再参照浏览器可视区域的高度。
修正第一个缺陷很简单,只需用css hack,加上 _position:absolute 就行。
修正第二个缺陷,我们需要借助javascript,动态地计算出遮罩层的高度和宽度,特别注意的是,为保证遮罩层在页面滚动时也遮住窗口,遮罩层的高宽应该覆盖住滚动区域。
动态计算的代码如下,其中mask变量指向遮罩层:

</html>

复制代码 代码如下:

您可能感兴趣的文章:

function calculateSize() {
var b = document.documentElement.clientHeight ? document.documentElement
: document.body,
height = b.scrollHeight > b.clientHeight ? b.scrollHeight :
b.clientHeight,
width = b.scrollWidth > b.clientWidth ? b.scrollWidth :
b.clientWidth;
mask.css({height: height, width: width});
}

此外,还需注意到,当页面大小发生变化时,要重新计算遮罩层的高宽,否则可能会新扩大的区域没有被遮罩。

复制代码 代码如下:

function resize() {
calculateSize();
$(window).on(“resize”, calculateSize);
}

Step 3:
通过Step 1和Step
2,我们基本上已完成了构建遮罩层的工作。但工作并未完成,在IE6下,还需考虑一些特殊的情况:当页面上存在select元素的时候,遮罩层将无法遮住select元素,这是IE
6的一个著名bug,解决方案是在遮罩层中增加一个iframe。
Html+css代码如下:

复制代码 代码如下:

<div unselectable=”on”
style=”display:none;background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;_position:absolute;height:100%;width:100%;overflow:hidden;z-index:10000;”><div
style=”position:absolute;width:100%;height:100%;top:0;left:0;z-index:10;background-color:#000″></div><iframe
border=”0″ frameborder=”0″
style=”width:100%;height:100%;position:absolute;top:0;left:0;z-index:1″></iframe></div>

有几个小技巧需要稍作解释:
1)iframe的样式使用 width:100%;height:100%;
,这是可行的,因为它的父定位元素的高宽已经确定了
2)在遮罩层内部,除了一个iframe外,还增加了一个div,并且该div和iframe的position都是absolute,div的z-index大于iframe的z-index,这样一来,就使得内部div遮挡住了iframe。这具有现实意义:使得页面的一些事件(例如onclick,
onmouseup, onmousemove)依然会被响应在本页面上,而不是被iframe截获。
代码示例
综合以上的分析,整体的实现代码如下,大家可以参考一下:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图