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

如何在浏览器窗口上添加一个遮罩层 背景 在web2.0中，页面弹窗是一个很常见的交互方式，这样既可以避免不必要的页面跳转，也可以改进界面的布局和可交互性。 但是，浏览器原生的弹窗函数（alert, confirm, prompt）有着很大的局限性，主要是它们的展现UI一来很不美观，二来也不够灵活，因此，我们经常需要自行定义弹窗函数。 当我们要实现一个模式弹窗时（模式弹窗，即是说出现弹窗时，页面其它地方不可点击），通常的做法是用一个div将整个页面窗口遮挡住。 实现 下面，我们一步步地实现一种较为简洁有效的遮罩层： Step 1: 首先我们要考虑定义一个遮挡浏览器窗口的div，考虑下面一段htm 在Web开发中，创建自定义弹窗以提供更好的用户体验是一个常见的需求。传统的浏览器弹窗函数如`alert`, `confirm`, `prompt`虽然简单易用，但其样式和交互能力有限，不能满足现代网页设计的要求。因此，我们经常需要自己创建具有遮罩层的模态对话框，以达到在弹窗出现时阻止用户对页面其他部分的交互。 **遮罩层的实现原理** 1. **HTML结构**：我们需要在HTML中添加一个全屏的`div`作为遮罩层。这个`div`通常放置在页面的最顶层，用于覆盖页面的所有内容。 ```html <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> ``` 这个`div`的样式中，`background`属性设置背景颜色为黑色，`filter:alpha(opacity=10)`和`opacity:.1`是针对不同浏览器的透明度设置，使其半透明。`position:fixed`使遮罩层始终固定在视口位置，不论用户滚动还是窗口大小变化。`z-index:10000`确保遮罩层位于所有元素之上。 2. **CSS兼容性**：对于不支持`position:fixed`的IE6，我们可以使用`_position:absolute`进行CSS Hack来解决。同时，由于IE6中`height:100%`无效，我们需要通过JavaScript动态计算并设置遮罩层的高度和宽度，以确保完全覆盖浏览器窗口。 ```javascript 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); } ``` 3. **IE6的特殊处理**：在IE6下，遮罩层无法覆盖`select`元素，这可以通过在遮罩层内嵌入一个`iframe`来解决。`iframe`的目的是创建一个新的层，从而隔离遮罩层与`select`元素，防止选中穿透。 ```html <div unselectable="on" style="display:none;background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;_position:absolute;z-index:9999;"> <iframe src="javascript:false;" frameborder="0" style="position:absolute;width:100%;height:100%;z-index:-1;"></iframe> </div> ``` 4. **显示与隐藏**：当需要弹出对话框时，可以将遮罩层的`display`属性设置为`block`，关闭时则设置为`none`。同时，可以配合JavaScript事件监听，如`click`、`keydown`等，实现对遮罩层的交互控制。 5. **优化与扩展**：为了增强可复用性和维护性，可以将遮罩层的生成与管理封装为一个JavaScript组件，接受参数以定制样式和行为。此外，还可以结合AJAX技术，实现异步加载内容的弹窗。 通过上述步骤，我们就能在浏览器窗口上创建一个功能完善的遮罩层，为用户提供更丰富的交互体验。遮罩层的应用不仅限于模态对话框，还可以用于加载指示器、提示信息等多种场景。理解并掌握这种技术对于提升网站的用户体验至关重要。