How to add a mask layer on the browser window_Basic knowledge

How to add a mask layer on the browser window

Background
In web2.0, page pop-ups are a very common interaction method, which can avoid unnecessary Page jumps can also improve the layout and interactivity of the interface.
However, the browser’s native pop-up functions (alert, confirm, prompt) have great limitations, mainly because their display UI is not beautiful and not flexible enough. Therefore, we often need to Define popup function.
When we want to implement a modal pop-up window (modal pop-up window means that when the pop-up window appears, other parts of the page cannot be clicked), the usual approach is to use a div to block the entire page window.
Implementation
Below, we implement a simpler and more effective mask layer step by step:

Step 1:
First we To consider defining a div that blocks the browser window, consider the following HTML css code:

It can block the browser The function of the window, several 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): Under IE, set the div The transparency of the div is set to 0.1; opacity:.1: Under non-IE, set the transparency of the div to 0.1
The above three attributes are combined to achieve the "obstructed but visible" effect of the rest of the page elements.
2)left:0px;top:0px;position:fixed;height:100%;width:100%: Define the height and width of the div to be 100% of the browser height and width respectively. Here is a little 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 with reference to the height of the browser's viewport. In addition, setting position to fixed can ensure that the mask layer always blocks the visible area of ​​the page even when the browser is scrolling or resizing.
3)overflow:hidden is used to avoid the appearance of scroll bars.

Step 2:
Careful readers should be able to find that the above css code does not apply to IE 6. There are two reasons: First, IE6 does not support position:fixed; Secondly, and 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.
Fixing the first flaw is easy, just use a css hack and add _position:absolute.
To correct the second flaw, we need to use javascript to dynamically calculate the height and width of the mask layer. Special attention is that in order to ensure that the mask layer also covers the window when the page is scrolled, the height of the mask layer Width should cover the scroll area.
The code for dynamic calculation is as follows, where the mask variable points to the mask layer:

Copy the code The code is as follows:

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});
}

In addition, it is also important to note 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.

Copy code The code is as follows:

function resize() {
calculateSize();
$(window).on(“resize”, calculateSize);
}

Step 3:
Through Step 1 and Step 2, we You're basically done building the mask layer. But the work is not finished. Under IE6, some special situations need to be considered: when there is a select element 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 in Add an iframe to the mask layer.
Html css code is as follows:

Copy code The code is as follows:

There are a few tips that need a little explanation:
1) The style of the iframe uses width:100%;height:100%;, which is feasible because of its parent positioned element The height and width have been determined
2) Inside the mask layer, in addition to an iframe, a div is added, and the positions of the div and iframe are 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 on this page instead of being intercepted by the iframe.
Code example
Based on the above analysis, the overall implementation code is as follows, you can refer to it:

Copy code 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.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
};
})();

It is very simple to use. When you need to show the mask layer, call windowMask.show(). When you want to remove the mask layer, call windowMask.hide().