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


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表单常用验证集合
Jan 16 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
jquery操作select大全
Apr 25 Javascript
jquery使用经验小结
May 20 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
如何提高Dom访问速度
Jan 05 Javascript
Vue.js基础知识小结
Jan 13 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
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筛选不存在的图片资源
2015/04/28 PHP
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
import的本质解析
2017/10/30 Python
python实现决策树
2017/12/21 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
python中str内置函数用法总结
2020/12/27 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
四种会话跟踪技术
2015/05/20 面试题
护理专业本科生自荐信
2013/10/01 职场文书
成人毕业生自我鉴定
2013/10/18 职场文书
保密普查工作实施方案
2014/02/25 职场文书
学生会竞聘书范文
2014/03/31 职场文书
社区服务活动总结
2014/05/07 职场文书
环保倡议书50字
2014/05/15 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
公司员工体检通知
2015/04/21 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
2019思想汇报范文
2019/05/21 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
Python基础之进程详解
2021/05/21 Python
教你用python实现12306余票查询
2021/06/30 Python