Js implementation div pop up layer method

The example of this article describes the js implementation of div pop-up layer method. Share with you for your reference. Specific analysis is as follows:

Say now all kinds of plug-ins out to achieve the pop-up layer is too simple, but the individual sometimes feel that those plug-ins are not practical often find some pure js original ecological things, below to share with you a native too js div pop-up layer instance, there is a need for friends to see together.

This need not say more, directly paste the code.

/*

 *  The 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 centers the pop-up layer to show 

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 ash unclickable 

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 added to page 

document.body.appendChild(procbg);

document.body.style.overflow = "hidden"; //Cancel scrollbar 

 

//The following section implements 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);

}

<!-- Ejection layer start -->
<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=" Shut down " onclick="closeDiv();" />

</div>

<!-- The end of the -->

As to some beautification effect, everybody can oneself repair repair changed.