在浏览器窗口上添加遮罩层的方法


Posted in Javascript onNovember 12, 2012

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

背景
在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()。
Javascript 相关文章推荐
javascript 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
javascript中setInterval的用法
Jul 19 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
php对mongodb的扩展(小试牛刀)
Nov 11 #Javascript
php对mongodb的扩展(初识如故)
Nov 11 #Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 #Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 #Javascript
jQuery语法总结和注意事项小结
Nov 11 #Javascript
javascript继承之为什么要继承
Nov 10 #Javascript
jquery表单验证使用插件formValidator
Nov 10 #Javascript
You might like
php截取中文字符串不乱码的方法
2013/12/25 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
php中使用websocket详解
2016/09/23 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
js格式化时间小结
2014/11/03 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python实现配置文件备份的方法
2015/07/30 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
Python中SQLite如何使用
2020/05/27 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
体育节口号
2014/06/19 职场文书
Java使用Unsafe类的示例详解
2021/09/25 Java/Android
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技