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

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

工具：电脑；浏览器；ultraedit软件；
操作步骤如下：
1、打开UE编辑器，新建一个空白的html文件和css文件；

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

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

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

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

var p=document.createElement("DIV");
p.id="MyAlertBoxMasker";
p.style.position="absolute";
p.style.width=document.body.scrollWidth;
p.style.height=document.documentElement.offsetHeight;
p.style.zIndex='998';
p.style.top='0';
p.style.left='0';
p.style.backgroundColor="gray";
p.style.opacity='0.5';
p.style.filter="alpha(opacity=80)";
//内容层
var p1=document.createElement("DIV");
var top=parseInt(parseInt(document.body.scrollHeight)*0.25)+document.body.scrollTop;
p1.id="MyAlertBox";
p1.style.position="absolute";
var left=document.documentElement.offsetHeight/2;
var left=0;
p1.style.zIndex='999';
p1.style.top=top+'px';
p1.style.left=left+'px';


p1.innerHTML="";//这里是浮动层的具体HTML内容
document.body.appendChild(p);
document.body.appendChild(p1);
//上面就是出现的代码。-----------

//下面代码是关闭的
document.body.removeChild(document.getElementById('MyAlertBoxMasker'));
document.body.removeChild(document.getElementById('MyAlertBox'));

如何在浏览器窗口上添加一个遮罩层 背景 在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 用来避免滚动条的出现。 Step 2: 细心的读者应该可以发现上述的css代码并不适用于IE 6，原因有两个：一来，IE6不支持position:fixed；二来，更重要的是，在IE 6中，height:100%不起作用，div的高度不再参照浏览器可视区域的高度。 修正第一个缺陷很简单，只需用css hack，加上 _position:absolute 就行。 修正第二个缺陷，我们需要借助javascript，动态地计算出遮罩层的高度和宽度，特别注意的是，为保证遮罩层在页面滚动时也遮住窗口，遮罩层的高宽应该覆盖住滚动区域。 动态计算的代码如下，其中mask变量指向遮罩层： 复制代码 代码如下: 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截获。 代码示例 综合以上的分析，整体的实现代码如下，大家可以参考一下： 复制代码 代码如下: var windowMask = (function($) { var isIE6 = $.browser.msie && $.browser.version == "6.0"; var mask = '<div unselectable="on" style="display:none;background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;"></div>'; isIE6 && (mask = '<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>'); mask = $(mask); $("body").append(mask); function show() { isIE6 && resize(); mask.show(); } function hide() { isIE6 && $(window).off("resize", calculateSize); mask.hide(); } 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); } return { show: show, hide: hide }; })(); 使用很简单，当需要展现遮罩层时，调用 windowMask.show()，要移除遮罩层时，调用 windowMask.hide()。

---

台安县15730635266： 在一个弹出的窗口上增加一个遮罩层?如图. - ？
承蚂氯化： <!DOCTYPE html><html lang=＂en＂><head> <meta charset=＂UTF-8＂> <title>Document</title> <style> #cover{ position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.3); display:none; z-index:1000; } </style></...

台安县15730635266： 如何使用遮罩层遮住当前显示区域?禁止鼠标滚动? - ？
承蚂氯化： 当遮盖层出现时$(＂body＂).css(＂overflow＂, ＂hidden＂); 关闭时$('body').css('overflow', 'auto');

台安县15730635266： 在网页上面放一个半透明的黑色的遮罩层,却不影响网页的正常使用. - ？
承蚂氯化： 我这里怎么没看到这个按钮,不过按你的描述,应该是css3 pointer-events,你看一下那个黑色层上是不是有这个样式属性,并且值是none

台安县15730635266： laery如何获取弹窗的遮罩层 - ？
承蚂氯化： 实现目标:1、 点击按钮弹出带遮罩层的对话框;2、 页面上下左右滚动时,弹出的对话框水平和垂直始终居中.实现步骤如下:1、 拖入编辑区2个矩形,并点右键—转换—转换为动态面板;2、 双击其中一个动态面板设置标签为“遮罩层”(...

台安县15730635266： 求CSS加遮罩的操作方法？
承蚂氯化： 具体解决方案如下: 一、IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight属性的差别. clientHeight 在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度...

台安县15730635266： 如何在HTML上做一个固定的层遮挡网页中的控件?？
承蚂氯化： ie里可以用下面方法试试看.FireFox好像没有此类问题. 可以先判断浏览器类型如果是IE加一个透明的IFREAM #iframe_show{ position: absolute; top:0px; left:0px; width:100%; height:100%; z-index:0; filter:progid:DXImageTransform.Microsoft.Alpha...

台安县15730635266： 在PC端登录页面,想通过ctrl+X操作来弹出登录框,登录框后有遮罩层,咋做呢?？
承蚂氯化： <!DOCTYPE html><html lang=＂en＂> <head> <meta charset=＂UTF-8＂> <meta name=＂viewport＂ content=＂width=device-width, initial-scale=1.0＂> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }#main { ...

台安县15730635266： android 怎么给一个view添加遮罩层 - ？
承蚂氯化： 简单的就是再写个view作为遮罩,改在它的上面.

台安县15730635266： android 怎么给一个view添加遮罩层 - ？
承蚂氯化： 加一个全屏的view吧,backgroundcolor设置成你想要的透明度 加载完成remove或者setvisibility为gone 祝你早日完成

台安县15730635266： JS怎么创建一个遮罩层将整个页面都遮盖住? - ？
承蚂氯化： 你这个应该是由于iframe的原因吧,建议使用top访问顶层页面,然后在顶层页面加入这个遮罩层试试.