JavaScript implements the page popup layer effect

Pop-up layer effect is a very useful feature, many websites have used this way to achieve login and registration, such as Baidu:

Features of the pop-up layer: Click Sign in or register when the middle part of the page pops up a login or registration area and the page has a mask layer, and the login box above the mask layer, that is, the Z-index value of the login box is greater than the mask layer Z-index value. Close the Login or register box when you click Close or mask layer (some pages do not implement the function of clicking the mask layer to close the login or register area.) )。

Recently also made a similar pop-up layer effect, first show the final effect:

Simply say the process of implementation.

The first is the mask layer. The mask layer is created during the dynamic loading of the page, because the mask layer needs to cover the entire page, so the height of the mask layer is calculated in 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 entire page needs to be obscured. Transparency, of course, is also necessary.

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

Dynamically create a mask layer from JavaScript and add it to the page:

Create mask layer node var omask = document.createelement (' div '); omask.id = ' mask '; oMask.style.width = pagewidth + ' px '; o Mask.style.height = pageheight + ' px ';d ocument.body.appendChild (omask);

The PageWidth and PageHeight in the above code will be the width and height values of the page, by

Gets the height and width of the page var pageheight = Document.documentelement.scrollheight;var PageWidth = Document.documentElement.scrollWidth;

Get. So the mask layer is finished.

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

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

The formula means:

Left=right= (page is area width-pop-up layer width)/2;top=bottom= (page is the height of the area-the height of the ejection layer)/2

But the width of the area is equal to the width of the page, because there are scrollbars at the bottom of the page. The scroll bar at the bottom of the page is also wonderful AH. It must have been added to the page before setting its left and top values, otherwise it cannot be set.

OLogin.style.left = (pagewidth-loginwidth)/2 + ' px '; oLogin.style.top = (clientheight-loginheight)/2 + ' px ';

Note that the orientation of the pop-up layer here is fixed positioning, and its z-index value is greater than the mask layer.

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

Finally, the event response function is added to the Close button.

Eventutil.addhandler (Oclose, ' click ', Function () {document.body.removeChild (omask);d Ocument.body.removeChild ( Ologin);});

Eventutil is an object written to be compatible with the browser event handler, which is implemented here:

var eventutil = {//Add event handler function 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 event handler 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 is done here, but in reality it is very simple. As long as we know the principle, the rest is the way of realization.

Click the login button that feature is not introduced, add an event handler function on the line.

Source code (not written specification):

<! DOCTYPE html>
　　
Finish!
　　
　　
　　
　　
JavaScript implements the page popup layer effect