_javascript Technique of pop-up page effect based on JavaScript

Pop-up layer effect is a very useful function, many sites have adopted this way to achieve login and registration, such as Baidu:

Features of the pop-up layer: Click Login or Register in the middle part of the page pop-up a login or registration area and the page has a mask layer, and the login box on the mask layer, that is, the Z-index value of the landing box is greater than the mask layer of the Z-index value. When clicking the close or masking layer, close the Login or registration box (some pages do not implement the Click Mask to close the login or registration area.) )。

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

Simply say the process of implementation.

First, 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 computed in JavaScript, and its width is the width of the entire page, which is also easy to get. You also need to give it a z-index value, as large as possible, because you need to cover the entire page. Transparency, of course, is also necessary.

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

Create a mask layer dynamically through JavaScript 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 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 complete.

Again, the effect of the pop-up layer.

The pop-up layer is displayed in the middle part of the page (this is also the key step), i.e. the pop-up layer is the same distance from the left and right side of the page, and the distance from the top of the page is the same as that from the bottom. Attention is in the area.

　　

The formula means:

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

And here the width of the area is equal to the width of the page because there is a scroll bar at the bottom of the page. The Web page with a scroll bar at the bottom is also a wonderful thing. You must have added it 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 ';

The cloud-dwelling community reminds you that the pop-up layer is positioned in a fixed position, and its z-index value is larger than the mask layer.

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

The last thing to do is to add an 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 for compatible browser event handling functions, specifically 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 here is done, in fact, the reality is very simple. As long as you know the principle, the rest is the implementation of the way.

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

Source code (not standard written):

<! DOCTYPE html>  

The

Code ends here, this article is not good, but also ask the heroes to give valuable advice. At the same time, thank you all have been on the script between the support of the website, in this, cloud habitat Community small wish everyone happy New Year's day.