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


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 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
微信小程序实现单选功能
Oct 30 Javascript
vue实现购物车结算功能
Jun 18 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
jQuery实现跨域
2015/02/03 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
Python中的连接符(+、+=)示例详解
2017/01/13 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
Python字符串对象实现原理详解
2019/07/01 Python
Python将string转换到float的实例方法
2019/07/29 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
党在我心中的演讲稿
2014/09/13 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
2014年化验室工作总结
2014/11/21 职场文书
2014年环保局工作总结
2014/12/11 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
交通处罚决定书
2015/06/24 职场文书
初中语文教学反思范文
2016/03/03 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL