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:
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.
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:
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:
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().

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics





Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...
