Implement page pop-up effect based on Javascript.

Implement page pop-up effect based on Javascript.

The pop-up layer is a very practical function. Many websites use this method to log on and register, such as Baidu:

Features of the pop-up layer: When you click "Log on" or "register", a logon or registration area is displayed in the middle of the page. The page has a mask layer, and the logon box is on top of the mask layer, that is, the value of z-index in the login box must be greater than the value of z-index in the mask layer. When you click Close or mask layer, the logon or registration box is closed (some web pages do not enable click mask layer to disable the logon or registration area function .).

Recently, a similar pop-up layer effect has been created. First, the final effect is shown as follows:

Let's briefly describe the implementation process.

The first is the mask layer. The mask layer is created during dynamic page loading. Because the mask layer needs to cover the entire page, the height of the mask layer is calculated using JavaScript, and its width is the width of the entire page, which is also easy to get. You also need to set a z-index value for it, as large as possible, because the whole page needs to be covered. Of course, transparency is also required.

# Mask {background: #000; opacity :. 6; filter: alpha (opacity = 60); position: absolute; left: 0; top: 0; width: 100%; height: 1000px;/* dynamic acquisition, the height is set to test */z-index: 1000 ;}

Use JavaScript to dynamically create a mask layer and add it to the page:

// Create a mask layer node var oMask = document. createElement ('div '); oMask. id = 'mask'; oMask. style. width = pageWidth + 'px '; oMask. style. height = pageHeight + 'px '; document. body. appendChild (oMask );

The pageWidth and pageHeight values in the code above indicate the width and height of the page.

// Obtain the page height and width var pageHeight = document.doc umentElement. scrollHeight; var pageWidth = document.doc umentElement. scrollWidth;

. In this way, the mask layer is complete.

Let's talk about the effect of the pop-up layer.

The pop-up layer is displayed in the middle of the page (this is also a key step), that is, the distance between the pop-up layer and the left and right of the page is equal, the distance from the top of the page is equal to the distance from the bottom. Note that it is in the region.

　　

The formula is:

Left = right = (page but area width-pop-up layer width)/2; top = bottom = (page but area height-pop-up layer height)/2

Here, the area width is equal to the page width because there is a scroll bar at the bottom of the page. The web page with a scroll bar at the bottom is amazing. Before setting its left and top values, you must add it to the page. Otherwise, it cannot be set.

oLogin.style.left = (pageWidth - loginWidth) / 2 + 'px';oLogin.style.top = ( clientHeight- loginHeight) / 2 + 'px';

The pop-up layer is fixed and Its z-index value must be greater than that of the mask layer.

#login{position:fixed;width:400px;height:400px;background:#fff;z-index: 1001;}

Finally, add the event response function to the close button.

EventUtil.addHandler(oClose, 'click', function(){document.body.removeChild(oMask);document.body.removeChild(oLogin);});

EventUtil is an object written to be compatible with browser event processing functions. The specific implementation is as follows:

Var EventUtil = {// Add the event handler addHandler: function (element, type, handler) {if (element. addEventListener) {element. addEventListener (type, handler, false);} else if (element. attachEvent) {element. attachEvent ('on' + type, handler);} else {element ['on' + type] = handler ;}}, // Delete the event processing function removeHandler: function (element, type, handler) {if (element. removeEventListener) {element. removeEventListener (type, handler, false);} else if (element. detachEvent) {element. detachEvent ('on' + type, handler);} else {element ['on' + type] = null ;}}};

Most of the content here is complete, but the reality is very simple. As long as you know the principle, the rest is the implementation method.

Click the "Log on" button. You just need to add an event processing function.

Source code (writing non-standard ):

<! DOCTYPE html> 
This is the end of the Code. This article is not well written. Please give your valuable comments. At the same time, I would like to thank you for your support for scripting websites. Here, we wish you a Happy New Year.
Articles you may be interested in:

 

 
  
Js implementation pop-up on the page: simple and practical
 
  
Js production simple pop-up layer DIV display mask in the center of the page
 
  
A prompt box similar to QQ news is displayed on the JS implementation timing page.
 
  
Close the pop-up layer elsewhere on the js click Page (sample code)
 
  
A New Method for js to pop up a new page to avoid being intercepted by browsers and ad
 
  
Js Jquery creates a pop-up layer to load a page
 
  
Examples of js implementation pop-up window, page turns gray and not operable
 
  
Disable all js scripts such as alert and pop-up windows on the iframe page.
 
  
How to overwrite the entire page through the pop-up layer of js and css