In web, page pop-up is a common interactive method, which can avoid unnecessary page jumps, it can also improve the layout and interactivity of the interface. How can I add a mask layer to the 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 p 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 p that blocks the browser window, and consider the following html + css code:
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 p to black; filter: alpha (opacity = 10): in IE, set the transparency of p to 0.1; opacity :. 1: Set the transparency of p to 0.1 in non-IE mode.
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 p as 100% of the browser height and width, respectively. Here is a tip: if the position of p is fixed or absolute, when the height of p is set to a percentage (for example, 100%), the height of p 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 p 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:
The 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.
The 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:
The Code is as follows:
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 p is added, and the position of the p and iframe are both absolute. The z-index of p is greater than the z-index of iframe, in this way, the internal p 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:
The Code is as follows:
Var windowMask = (function ($ ){
Var isIE6 = $. browser. msie & $. browser. version = "6.0 ";
Var mask ='
';
IsIE6 & (mask ='
');
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 ().
