JS与CSS实现弹出层覆盖全屏的两种方案对比

弹出层基础结构与样式

本文通过具体实例，介绍了利用JavaScript和CSS技术实现弹出层覆盖整个页面的完整方案，供读者参考学习。

实现带有透明背景及边框的弹出层，通常采用以下HTML结构与CSS样式配置：

.alertMessageBg{
position:fixed;
_position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
display:none;
}
.alertMessageDivBorder{
position:fixed;
_position:absolute;
width:750px;
height:370px;
left:50%;
top:50%;
margin:-185px 0 0 -375px;
background:#000;
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity:0.3;
z-index:98;
display:none;
}
.alertMessageDiv{
position:fixed;
_position:absolute;
width:730px;
height:350px;
left:50%;
top:50%;
margin:-175px 0 0 -365px;
background:#fff;
z-index:99;
display:none;
font-size:14px;
}
<div class="alertMessageBg"></div>
<div class="alertMessageDivBorder"></div>
<div class="alertMessageDiv"></div>

全屏覆盖的两种实现方案对比

实现弹出层背景覆盖整个网页的两种主要方法：

1. CSS方案

.alertMessageBg{
position:fixed;
_position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
display:none;
}

2. JavaScript方案

.alertMessageBg{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
display:none;
}
var bgWidth = document.body.clientWidth + 'px',
 bgHeight = document.body.clientHeight + 'px',
 alertBgNode = $('.alertMessageBg');
alertBgNode.css({'width':bgWidth,'height':bgHeight});

对比上述两种实现方式，CSS方案显然更为简便。特别是在当前无需兼容IE6浏览器的环境下，CSS方案是更优选择。

希望本文提供的关于基于JS的Web程序设计中的弹窗覆盖方案，能对广大开发者有所帮助。