How to add masking layer on browser window

How to add a mask layer to a browser window

background
In web2.0, page pop-ups are a very common way of interaction, which can not only avoid unnecessary page jumps, but also improve the layout and interactivity of the interface.
However, the browser's native pop-up functions (alert, confirm, prompt) have great limitations. The main reason is that their display UI is not beautiful, and the other hand, it is not flexible enough. Therefore, we often need to define pop-up functions by ourselves.
When we want to implement a mode pop-up window (mode pop-up window, that is, when a pop-up window appears, the page cannot be clicked elsewhere), the usual practice is to use a div to block the entire page window.
accomplish
Below, we will implement a relatively simple and effective masking layer step by step:

Step 1:
First of all, we need to consider defining a div that blocks the browser window, and consider the following html+css code:
<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>
It can implement the function of blocking browser windows, and several of the css attributes that need attention are explained as follows:
1) background:#000: Set the background color of the div to black; filter:alpha(opacity=10): In IE, set the transparency of the div to 0.1; opacity:.1: In non-IE, set the transparency of the div to 0.1
The above three attributes combine to achieve the effect of "blocked but visible" of the remaining elements of the page.
2) left:0px;top:0px;position:fixed;height:100%;width:100%: Define the height and width of the div are 100% of the browser height and width respectively. Here is a trick. If the position of the div is fixed or absolute, then when the height of the div is set to a percentage (for example, 100%), the height of the div will be calculated based on the height of the browser's viewport. In addition, setting position to fixed can make the browser ensure that the mask layer is always blocked in the visible area of ​​the page even when scrolling or resize.
3) overflow:hidden is used to avoid the appearance of scroll bars.

Step 2:
Careful readers should find that the above css code does not apply to IE 6 for two reasons: First, IE 6 does not support position:fixed; second, more importantly, in IE 6, height:100% does not work, and the height of the div no longer refers to the height of the browser's visible area.
It is very simple to fix the first flaw, just use css hack and add _position:absolute.
To correct the second defect, we need to use JavaScript to dynamically calculate the height and width of the mask layer. It is particularly noteworthy that in order to ensure that the mask layer also covers the window when the page is scrolling, the height and width of the mask layer should cover the scrolling area.
The dynamically calculated code is as follows, where the mask variable points to the mask layer:

In addition, it should be noted that when the page size changes, the height and width of the mask layer must be recalculated, otherwise the newly expanded area may not be masked.

Step 3:
With Step 1 and Step 2, we have basically done the work of building the mask layer. But the work has not been completed. In IE6, some special situations need to be considered: when the select element exists on the page, the mask layer will not be able to cover the select element. This is a famous bug in IE 6. The solution is to add an iframe to the mask layer.
The Html+css code is as follows:

There are a few tips to explain:
1) The iframe's style uses width:100%;height:100%; , which is feasible because the height and width of its parent positioning element have been determined.
2) Inside the mask layer, in addition to an iframe, a div is also added, and the position of the div and iframe are both absolute, and the z-index of the div is greater than the z-index of the iframe. In this way, the internal div blocks the iframe. This has practical significance: some events on the page (such as onclick, onmouseup, onmousemove) will still be responded to this page, rather than being intercepted by an iframe.
Code Example
Based on the above analysis, the overall implementation code is as follows, you can refer to it:

It is very simple to use. When you need to display the mask layer, call () and when you want to remove the mask layer, call ().