如何在浏览器窗口上添加一个遮罩层
更新日期：2024.05.28
如何在浏览器窗口上添加一个遮罩层
背景
在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()。
15711575362 :在网页上面放一个半透明的黑色的遮罩层,却不影响网页的正常使用。_百度...
阚肿珠957 :答：我这里怎么没看到这个按钮，不过按你的描述，应该是css3 pointer-events，你看一下那个黑色层上是不是有这个样式属性，并且值是none
15711575362 :如何用css实现半透明遮罩层效果
阚肿珠957 :答：1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 2 、要覆盖整个可视区域通常的做法是: html,body{ height:100%} .mask{height:100%;width:100%;} 但是这样...
15711575362 :请问有谁知道设计网页遮罩css跟html的代码怎么写 就是点击之后弹出个小...
阚肿珠957 :答：var webH = $(window).height();//这里显示遮罩 ("#inner").click(function(e){ //#inner就是你要点击出现遮罩的按钮 (".shade,.tanceng").css("display","block");(".shade").height(webH);(".cue").html("亲，活动还在继续，5月6日-5月8日抽奖，要累计购买50万以上才可参加...
15711575362 :如何用图片遮盖网页上其他内容
阚肿珠957 :答：图片遮盖网页上的其他内容需要使用到z-index标签，来确定两个层在z轴上的前后，以此来遮盖住下面层的内容，实现图片遮盖网页上其他内容的目的。z-index指的是在z轴的前后关系，随着数值的增加，层在z轴的距离就越靠前，可以起到在Z轴方向上的前后层级关系。
15711575362 :CSS遮罩层不能完全遮罩页面
阚肿珠957 :答：1、先看下html，一个img图片控件，和一个有mask样式的div，里面有文字，这个就是遮罩层。2、然后看下样式定义，先看下图片容器和图片的样式，如图，其中要注意的是img_container样式里定义了position: relative;这个主要是为了让遮罩层做绝对定位做准备的。3、再看下遮罩层样式定义，代码如图，其中需要...
15711575362 :css如何给图片加一个蒙版遮罩
阚肿珠957 :答：1．首先，看一下HTML，一个img图像控件和一个带有样式的div，其中包含文本。这个就是蒙版遮罩层。2．然后，查看样式定义。先检查图像容器和图像样式，如图所示。其中要注意的是img_container样式里定义了position:relative，这个主要是为了遮罩层做绝对定位做准备的。3．接着，查看遮罩层的样式定义。该代码...
15711575362 :Final Cut Pro中文新手教程(18)遮罩的基本使用
阚肿珠957 :答：1、在Final Cut Pro中，点击效果浏览器，在左边的目录当中我们找到遮罩并点击它，你会发现有绘制遮罩、渐变遮罩、图像遮罩、形状遮罩、晕影遮罩这几个遮罩效果 2、选择形状遮罩，然后直接拖拽到视频片段就可以松手 3、遮罩是什么？遮罩就是遮罩遮住的内容会显示，遮罩范围外的内容就会隐藏，在预览窗口我们...
15711575362 :ae怎么在一个图层画两个遮罩
阚肿珠957 :答：在图层上右键单击，选择“新建”>“遮罩”>“椭圆”。使用椭圆遮罩工具在预览窗口中绘制第一个遮罩。在图层上右键单击，选择“新建”>“遮罩”>“椭圆”或“矩形”，或者选择“添加遮罩”按钮，并选择所需的遮罩类型。绘制第二个遮罩。你可以使用“选择工具”或“遮罩工具”调整遮罩的位置和大小。你还...
15711575362 :final cut pro 怎么加遮罩
阚肿珠957 :答：选中要添加遮罩的视频剪辑，然后在编辑器时间轴中将播放头移到需要添加遮罩的位置。点击左侧的“遮罩”按钮，这会将遮罩浏览器打开。在遮罩浏览器中，选择一个适合你需求的遮罩形状，例如矩形、椭圆形或自由绘制的遮罩。将遮罩形状拖动到视频预览窗口中，然后将其大小和位置调整到需要的大小和位置。在遮罩...
15711575362 :laery如何获取弹窗的遮罩层
阚肿珠957 :答：5、 设置里面的矩形为合适大小，并拖入一个按钮（或者矩形/文本面板）作为关闭按钮；设置按钮onclick事件为隐藏遮罩层和当前编辑的这个动态面板；6、 关闭当前的编辑页面，再次选择作为对话框的这个面板—右键—编辑选项—固定到浏览器…；7、勾选固定到浏览器窗口，水平和垂直都选择居中，并勾选“保持在...
阚肿珠957 :答：我这里怎么没看到这个按钮，不过按你的描述，应该是css3 pointer-events，你看一下那个黑色层上是不是有这个样式属性，并且值是none
阚肿珠957 :答：1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 2 、要覆盖整个可视区域通常的做法是: html,body{ height:100%} .mask{height:100%;width:100%;} 但是这样...
阚肿珠957 :答：var webH = $(window).height();//这里显示遮罩 ("#inner").click(function(e){ //#inner就是你要点击出现遮罩的按钮 (".shade,.tanceng").css("display","block");(".shade").height(webH);(".cue").html("亲，活动还在继续，5月6日-5月8日抽奖，要累计购买50万以上才可参加...
阚肿珠957 :答：图片遮盖网页上的其他内容需要使用到z-index标签，来确定两个层在z轴上的前后，以此来遮盖住下面层的内容，实现图片遮盖网页上其他内容的目的。z-index指的是在z轴的前后关系，随着数值的增加，层在z轴的距离就越靠前，可以起到在Z轴方向上的前后层级关系。
阚肿珠957 :答：1、先看下html，一个img图片控件，和一个有mask样式的div，里面有文字，这个就是遮罩层。2、然后看下样式定义，先看下图片容器和图片的样式，如图，其中要注意的是img_container样式里定义了position: relative;这个主要是为了让遮罩层做绝对定位做准备的。3、再看下遮罩层样式定义，代码如图，其中需要...
阚肿珠957 :答：1．首先，看一下HTML，一个img图像控件和一个带有样式的div，其中包含文本。这个就是蒙版遮罩层。2．然后，查看样式定义。先检查图像容器和图像样式，如图所示。其中要注意的是img_container样式里定义了position:relative，这个主要是为了遮罩层做绝对定位做准备的。3．接着，查看遮罩层的样式定义。该代码...
阚肿珠957 :答：1、在Final Cut Pro中，点击效果浏览器，在左边的目录当中我们找到遮罩并点击它，你会发现有绘制遮罩、渐变遮罩、图像遮罩、形状遮罩、晕影遮罩这几个遮罩效果 2、选择形状遮罩，然后直接拖拽到视频片段就可以松手 3、遮罩是什么？遮罩就是遮罩遮住的内容会显示，遮罩范围外的内容就会隐藏，在预览窗口我们...
阚肿珠957 :答：在图层上右键单击，选择“新建”>“遮罩”>“椭圆”。使用椭圆遮罩工具在预览窗口中绘制第一个遮罩。在图层上右键单击，选择“新建”>“遮罩”>“椭圆”或“矩形”，或者选择“添加遮罩”按钮，并选择所需的遮罩类型。绘制第二个遮罩。你可以使用“选择工具”或“遮罩工具”调整遮罩的位置和大小。你还...
阚肿珠957 :答：选中要添加遮罩的视频剪辑，然后在编辑器时间轴中将播放头移到需要添加遮罩的位置。点击左侧的“遮罩”按钮，这会将遮罩浏览器打开。在遮罩浏览器中，选择一个适合你需求的遮罩形状，例如矩形、椭圆形或自由绘制的遮罩。将遮罩形状拖动到视频预览窗口中，然后将其大小和位置调整到需要的大小和位置。在遮罩...
阚肿珠957 :答：5、 设置里面的矩形为合适大小，并拖入一个按钮（或者矩形/文本面板）作为关闭按钮；设置按钮onclick事件为隐藏遮罩层和当前编辑的这个动态面板；6、 关闭当前的编辑页面，再次选择作为对话框的这个面板—右键—编辑选项—固定到浏览器…；7、勾选固定到浏览器窗口，水平和垂直都选择居中，并勾选“保持在...
