Question

js弹出的遮罩层，如何能遮住全屏？

html中的frameset，假如有上中下三个frame，遮罩层来自中间的frame，弹出来的遮罩层怎么样才能遮住整个浏览器页面，而不只是中间的frame，请高手赐教！谢谢！
<script language=javascript>
// JScript 文件
var shadowDiv1;//阴影层
var isIe=window.navigator.appName.indexOf("Microsoft")!=-1?true:false;
function shadow(color){
if(shadowDiv1){
shadowDiv1.parentNode.removeChild(shadowDiv1);
}
shadowDiv1=window.document.createElement("div");
shadowDiv1.id="shadowDiv1";
shadowDiv1.style.zIndex="9998";
shadowDiv1.style.position="absolute";
shadowDiv1.style.top="0px";
shadowDiv1.style.left="0px";
shadowDiv1.style.width="100%";
shadowDiv1.style.height="100%";
shadowDiv1.style.backgroundColor=color;
window.document.body.appendChild(shadowDiv1);
shadowDiv1.style.filter ="alpha(opacity=10)";
}
</script>

Answer 1

工具：电脑；浏览器；ultraedit软件；

操作步骤如下：

1、打开UE编辑器，新建一个空白的html文件和css文件；

2、在html文件中输入以下html代码；

3、在css文件中输入以下css代码；

4、编辑完成之后，选择格式为UTF8-无 BOM模式，保存文件；

5、在浏览器中打开此html文件，可以看到最终想要实现的遮住全屏效果。

Answer 2

只需5个步骤就可以解决遮住全屏的问题。

1．打开UE编辑器，创建一个空白的HTML源文件和CSS源文件，如下图。

2．在个HTML文件中输入下列HTML代码，如下图参考。

3．在CSS文件中输入以下CSS代码，如下图。

4．编辑完成后，选择UTF8－noBOM模式保存文件，如下图。

5．在浏览器中打开HTML文件，您可以看到最终想要实现的遮住全屏效果，如下图。

Answer 3

工具：电脑；浏览器；ultraedit软件；

操作步骤如下：

1、打开UE编辑器，新建一个空白的html文件和css文件；

2、在html文件中输入以下html代码；

3、在css文件中输入以下css代码；

4、编辑完成之后，选择格式为UTF8-无 BOM模式，保存文件；

5、在浏览器中打开此html文件，可以看到最终想要实现的遮住全屏效果。

Answer 4

可以使用css的opacity标签和position标签实现遮住全屏。

具体步骤如下：

需要准备的材料分别是：电脑、浏览器、ultraedit。

1、在ue编辑器中新建一个空白的html文件，css文件。

2、在ue编辑器中输入以下html代码。

3、在ue编辑器中输入以下css代码。

4、编辑完成以后，在ue编辑器中点击保存，格式选择UTF8无BOM。

5、在浏览器中打开此html文件，可以看到最终想要实现的遮住全屏效果。

Answer 5

遮罩层的CSS

#mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .3);
    z-index: 99999;
}

在传统浏览器中，不支持rgba的写法。

可以用伪造一层遮罩层

// html
<div id="modal">
    <div class="mask"></div>
    <!-- 这里开始才是真正的内容 -->
    <div class="dialog"></div>
</div>

// CSS
#modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99999;
}
#modal .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #000;
    opacity: .3;
}