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


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 相关文章推荐
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
如何提高数据访问速度
Dec 26 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 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文件操作的详解
2013/06/05 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
JavaScript 对象模型 执行模型
2010/10/15 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
javascript如何创建对象
2016/08/29 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
详解用python写一个抽奖程序
2019/05/10 Python
Python代码太长换行的实现
2019/07/05 Python
Mac安装python3的方法步骤
2019/08/09 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
Python sys模块常用方法解析
2020/02/20 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
怎样写留学自荐信
2013/11/11 职场文书
安全生产检讨书
2014/01/21 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
个人工作年终总结
2015/03/09 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
初婚未育证明样本
2015/06/18 职场文书
教师节表彰会主持词
2015/07/06 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏