在浏览器窗口上添加遮罩层的方法(浏览器窗口上线怎么办)

编辑：rootadmin

如何在浏览器窗口上添加一个遮罩层背景在web2.0中，页面弹窗是一个很常见的交互方式，这样既可以避免不必要的页面跳转，也可以改进界面的布局和可交互性。但是，浏览器原生的弹窗函数（alert, confirm, prompt）有着很大的局限性，主要是它们的展现UI一来很不美观，二来也不够灵活，因此，我们经常需要自行定义弹窗函数。当我们要实现一个模式弹窗时（模式弹窗，即是说出现弹窗时，页面其它地方不可点击），通常的做法是用一个div将整个页面窗口遮挡住。实现下面，我们一步步地实现一种较为简洁有效的遮罩层： Step 1: 首先我们要考虑定义一个遮挡浏览器窗口的div，考虑下面一段html+css代码： <div unselectable="on" style="background:#;filter:alpha(opacity=);opacity:.1;left:0px;top:0px;position:fixed;height:%;width:%;overflow:hidden;z-index:;"></div> 它可以实现遮挡浏览器窗口的功能，其中几个需要注意的css属性分别解释如下： 1)background:#: 将div的背景色设置为黑色; filter:alpha(opacity=): 在IE下，将div的透明度设置为0.1; opacity:.1: 在非IE下，将div的透明度设置为0.1 以上三个属性联合起来，实现了页面其余元素的“被挡住但可见”的效果。 2)left:0px;top:0px;position:fixed;height:%;width:%: 定义div的高度和宽度分别是浏览器高度和宽度的%。这里有个小技巧，如果div的position是fixed或者absolute，那么当div的高度设置为百分比(例如%)时，div的高度将参照浏览器可视区域(viewport)的高度来计算。此外，设置position为fixed，可以使得浏览器即使在scroll或resize时也保证遮罩层一直挡在页面的可视区域。 3)overflow:hidden 用来避免滚动条的出现。 Step 2: 细心的读者应该可以发现上述的css代码并不适用于IE 6，原因有两个：一来，IE6不支持position:fixed；二来，更重要的是，在IE 6中，height:%不起作用，div的高度不再参照浏览器可视区域的高度。修正第一个缺陷很简单，只需用css hack，加上 _position:absolute 就行。修正第二个缺陷，我们需要借助javascript，动态地计算出遮罩层的高度和宽度，特别注意的是，为保证遮罩层在页面滚动时也遮住窗口，遮罩层的高宽应该覆盖住滚动区域。动态计算的代码如下，其中mask变量指向遮罩层：此外，还需注意到，当页面大小发生变化时，要重新计算遮罩层的高宽，否则可能会新扩大的区域没有被遮罩。 Step 3: 通过Step 1和Step 2，我们基本上已完成了构建遮罩层的工作。但工作并未完成，在IE6下，还需考虑一些特殊的情况：当页面上存在select元素的时候，遮罩层将无法遮住select元素，这是IE 6的一个著名bug，解决方案是在遮罩层中增加一个iframe。 Html+css代码如下：有几个小技巧需要稍作解释： 1)iframe的样式使用 width:%;height:%; ，这是可行的，因为它的父定位元素的高宽已经确定了 2)在遮罩层内部，除了一个iframe外，还增加了一个div，并且该div和iframe的position都是absolute，div的z-index大于iframe的z-index，这样一来，就使得内部div遮挡住了iframe。这具有现实意义：使得页面的一些事件（例如onclick, onmouseup, onmousemove）依然会被响应在本页面上，而不是被iframe截获。代码示例综合以上的分析，整体的实现代码如下，大家可以参考一下：使用很简单，当需要展现遮罩层时，调用 windowMask.show()，要移除遮罩层时，调用 windowMask.hide()。

推荐整理分享在浏览器窗口上添加遮罩层的方法(浏览器窗口上线怎么办)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:浏览器窗口上限怎么办,浏览器窗口上限是什么意思,浏览器窗口上限是什么意思,在浏览器窗口上添加图片,浏览器窗口上限怎么办,浏览器窗口上限如何关闭,在浏览器窗口上怎么打开,在浏览器窗口上添加文字,内容如对您有帮助，希望把文章链接给更多的朋友！

Javascript开发之三数组对象实例介绍 vara=newArray();如果这样定义：a[3]="a";alert(a.length)4而是的1，如果定义了，但没有赋值则返回一个undefined(alert(a[0]))创建数组：arr=[];//是的,一个空中括号//与

javascript克隆对象深度介绍 js一般有两种不同数据类型的值：基本类型（包括undefined,Null,boolean,String,Number），按值传递；引用类型（包括数组，对象），按址传递，引用类型在值传

JavaScript mapreduce工作原理简析谷歌在到年间连续发表了三篇非常有影响力的文章，分别是年在SOSP上发布的GFS，年在OSDI上发布的MapReduce，以及年在OSDI上发布的BigTable。G