在浏览器窗口上添加一个遮罩层
2016-03-09 14:15
295 查看
背景
在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变量指向遮罩层:
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; line-height: 1.5 !important;">></div><iframe border="0" frameborder="0" allowtransparency="true" 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截获。
3) allowtransparency="true": 使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;</div><iframe border="0" frameborder="0" allowtransparency="true" 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()。
相关文章推荐
- 【Android】如何使用安卓的logcat『整理』
- Linux安装php运行环境
- mysql 中的 latch锁和Tlock(事务锁), DML加锁规则,以及死锁分析。
- Java容器Set的使用
- Android webview使用详解
- iOS开发有关二维码的介绍
- jquery 和 js 如何获取单选框的值
- 帝国国王科技大学上机题解
- 希尔排序
- “金箍咒”我的全排列组合算法设计演化之一重组字符串
- Android加载Gif和ImageView的通用解决方案:android-gif-drawable:GifTextView(2)
- Sql Server2008R2个人日常管理手册
- Maven Dependency 下载失败问题
- ps -ef |grep java
- Android WebView关于图片/文件上传
- [LeetCode]120 三角矩阵
- 采用Json字符串,往服务器回传大量富文本数据时,需要注意的地方,最近开发时遇到的问题。
- linux跨文件复制粘贴
- 《从零开始学Swift》学习笔记(Day 70)——Swift与Objective-C混合编程之Swift与Objective-CAPI映射
- cxf与spring整合