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

AI Hentai Generator
Generate AI Hentai for free.

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

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

Simple JavaScript functions are used to check if a date is valid. function isValidDate(s) { var bits = s.split('/'); var d = new Date(bits[2] '/' bits[1] '/' bits[0]); return !!(d && (d.getMonth() 1) == bits[1] && d.getDate() == Number(bits[0])); } //test var

This article discusses how to use jQuery to obtain and set the inner margin and margin values of DOM elements, especially the specific locations of the outer margin and inner margins of the element. While it is possible to set the inner and outer margins of an element using CSS, getting accurate values can be tricky. // set up $("div.header").css("margin","10px"); $("div.header").css("padding","10px"); You might think this code is

This article explores ten exceptional jQuery tabs and accordions. The key difference between tabs and accordions lies in how their content panels are displayed and hidden. Let's delve into these ten examples. Related articles: 10 jQuery Tab Plugins

Discover ten exceptional jQuery plugins to elevate your website's dynamism and visual appeal! This curated collection offers diverse functionalities, from image animation to interactive galleries. Let's explore these powerful tools: Related Posts: 1

http-console is a Node module that gives you a command-line interface for executing HTTP commands. It’s great for debugging and seeing exactly what is going on with your HTTP requests, regardless of whether they’re made against a web server, web serv

This tutorial shows you how to integrate a custom Google Search API into your blog or website, offering a more refined search experience than standard WordPress theme search functions. It's surprisingly easy! You'll be able to restrict searches to y

The following jQuery code snippet can be used to add scrollbars when the div content exceeds the container element area. (No demonstration, please copy it directly to Firebug) //D = document //W = window //$ = jQuery var contentArea = $(this), wintop = contentArea.scrollTop(), docheight = $(D).height(), winheight = $(W).height(), divheight = $('#c
