Pop-up page effect based on Javascript _ javascript skills

The pop-up layer is a very practical function. many websites use this method to log on and register. the following small series will share with you the specific implementation code through this article, if you are interested in the js pop-up page effect, learning it. the pop-up layer effect 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 ('P'); 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';

Note that 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 ):

 Mask layer effect