How to add a mask layer in a browser window

How to add a mask layer in a browser window

Background
In web, page pop-up window is a common interactive method, which can avoid unnecessary page jumps and improve the layout and interactivity of the interface.
However, the browser's native pop-up functions (alert, confirm, prompt) have great limitations, mainly because they present the UI very poorly and are not flexible enough. Therefore, we often need to define window function 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 general practice is to use a div to block the entire page window.
Implementation
Next, we will implement a concise and effective mask layer step by step:

Step 1:
First, we should 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 block the browser window. 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 a non-IE environment, set the div transparency to 0.1.
These three attributes are combined to achieve the effect of "blocked but visible" for other elements on the page.
2) left: 0px; top: 0px; position: fixed; height: 100%; width: 100%: defines the height and width of the div as 100% of the browser height and width. Here is a tip: if the position of the div is fixed or absolute, when the height of the div is set to a percentage (for example, 100%), the height of the div will refer to the visible area of the browser (viewport). In addition, setting position to fixed ensures that the mask layer remains in the visible area of the page even in scroll or resize.
3) overflow: hidden is used to avoid the appearance of the scroll bar.

Step 2:
Careful readers should be able to find that the above css Code does not apply to IE 6 for two reasons: first, IE6 does not support position: fixed; second, and more importantly, in IE 6, height: 100% does not work, and the height of the div does not refer to the height of the visible area of the browser.
It's easy to fix the first defect. Just use css hack and add _ position: absolute.
To fix the second defect, we need to use javascript to dynamically calculate the height and width of the mask layer. In particular, to ensure that the mask layer covers the window during Page scrolling, the height and width of the mask layer should overwrite the scrolling area.
The code for dynamic computing is as follows, where the mask variable points to the mask layer:
Copy codeThe Code is as follows:
Function calculateSize (){
Var B = document.doc umentElement. clientHeight? Document.doc umentElement: 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 });
}

In addition, note that when the page size changes, you need to recalculate the height and width of the mask layer. Otherwise, the new expanded area may not be masked.
Copy codeThe Code is as follows:
Function resize (){
CalculateSize ();
$ (Window). on ("resize", calculateSize );
}

Step 3:
Through Step 1 and Step 2, we have basically finished building the mask layer. However, 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 cannot 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:
Copy codeThe Code is as follows:
<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>

There are several tips to explain:
1) The iframe Style uses width: 100%; height: 100%;. This 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 added, and the position of the div and iframe are both absolute. The z-index of the div is greater than the z-index of the iframe, in this way, the internal div blocks iframe. This is practical: Some page events (such as onclick, onmouseup, and onmousemove) will still be responded to on this page, rather than being intercepted by iframe.
Sample Code
Based on the above analysis, the overall implementation code is as follows. For details, refer:
Copy codeThe Code is as follows:
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.doc umentElement. clientHeight? Document.doc umentElement: 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
};
})();

It is easy to use. When you need to display the mask layer, call windowMask. show () and call windowMask. hide () to remove the mask layer ().