这里的这个遮罩有点问题，高度上没有全部遮罩住，当缩小浏览器屏幕的时候宽度也没有全部遮罩住
<style>
body{margin:0;}
/*
body< html < 文档
*/
body,html{height:100%;}/*兼容IE低版本，要设置body和html也为100%*/
.floats{position:absolute;top:0;left:0; width:100%; height:100%; background:#000; opacity:0.5;filter:alpha(opacity=50);}
.alert{width:400px; height:200px; background:#fff; border:2px solid yellow; position:absolute;top:50%;left:50%; margin-top:-102px; margin-left:-202px;}/*如果不加margin-top和margin-left是不会居中的，要加上这两个属性，top的值是本身高度的一半，left是本身宽度的一半,这里因为加了边框所以都多加了两个像素*/
/*
标准 不透明度 opacity:0~1;
IE私有 filter:alpha(opacity=0~100);*/
</style>
</head>
<body>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
<div><img src="../../../4/images/nubia_06.jpg" width="960" height="848"></div>
<div><img src="../../../4/images/nubia_07.jpg" width="960" height="596"></div>
<div class="floats"></div>
<div class="alert"></div>
</body>
遮罩弹窗
时间： 2024-10-15 21:25:47