The method of realizing Div pop-up layer with JS

Say now all kinds of plug-ins out to realize the pop-up layer is really too simple, but individuals sometimes feel that those plug-ins are not practical often find some pure JS original ecological things, below to share a native too JS Div Pop-up instance, the need for friends to see together.

This is needless to say, directly affixed to the code. There are code comments:

code as follows:/*


* Pop-up div layer


*/


function Showdiv ()


{


var idiv = document.getElementById ("Idiv");


var mou_head = document.getElementById (' Mou_head ');


Idiv.style.display = "block";


//The following section will display the pop-up layer in the center


idiv.style.left= (document.documentelement.clientwidth-idiv.clientwidth)/2+ document.documentelement.scrollleft+ "px";


Idiv.style.top = (document.documentelement.clientheight-idiv.clientheight)/2+ document.documentelement.scrolltop-50+ "px";


 


//The following sections make the entire page to gray not clickable


var PROCBG = document.createelement ("div"); First create a Div


Procbg.setattribute ("id", "MYBG"); Define the ID of the DIV


procbg.style.background = "#000000";


procbg.style.width = "100%";


procbg.style.height = "100%";


procbg.style.position = "fixed";


procbg.style.top = "0";


Procbg.style.left = "0";


Procbg.style.zIndex = "500";


procbg.style.opacity = "0.6";


procbg.style.filter = "Alpha (opacity=70)";


//Background layer Join page


Document.body.appendChild (PROCBG);


Document.body.style.overflow = "hidden"; Cancel scroll bar


 


//The following parts to achieve the pop-up layer drag effect


var posx;


var posy;


mou_head.onmousedown=function (e)


{


if (!e) e = window.event; IE


posx = E.clientx-parseint (Idiv.style.left);


posy = E.clienty-parseint (Idiv.style.top);


document.onmousemove = MouseMove;


}


document.onmouseup = function ()


{


Document.onmousemove = null;


}


function MouseMove (EV)


{


if (ev==null) ev = window.event;//ie


Idiv.style.left = (EV.CLIENTX-POSX) + "px";


Idiv.style.top = (ev.clienty-posy) + "px";


}


}


function Closediv ()//close the pop-up layer


{


var Idiv=document.getelementbyid ("Idiv");


idiv.style.display= "None";


document.body.style.overflow = "Auto"; Restore page scroll bar


var body = document.getElementsByTagName ("Body");


var mybg = document.getElementById ("MYBG");


Body[0].removechild (MYBG);


}


<!--the pop-up layer starts-->

<div id= "Idiv" style= "display:none; Position:absolute; z-index:1000; Background: #67a3d9; " >
<div id= "Mou_head" style= "width=" 100px; height=10px;z-index:1001; Position:absolute; " > This is used to implement the drag layer </div>
<input type= "button" value= "Close" onclick= "Closediv ();"/>
</div>
<!--end-->

As for some landscaping effect, we can repair their own changes to change.