本文详细解析了使用JavaScript与CSS实现弹出层覆盖整个页面的两种方法。重点对比了CSS固定定位（position:fixed）与JavaScript动态获取视口尺寸（clientWidth/clientHeight）两种方案。通过代码示例展示结构样式，并分析在兼容性及代码简洁度上的差异，推荐在现代开发中优先使用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方案
相关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方案
相关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程序设计中的弹窗覆盖方案，能对广大开发者有所帮助。