How to implement div pop-up layer in js_javascript skills

The example in this article describes the method of implementing div pop-up layer in js. Share it with everyone for your reference. The specific analysis is as follows:

It is said that now that various plug-ins have come out, it is really easy to implement a pop-up layer, but sometimes I feel that those plug-ins are not practical and often look for some pure js original ecology. Let me share with you a native js div pop-up layer. Examples, friends in need can take a look.

No need to say more about this, just post the code. There are codes and comments:

Copy code The code is 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 parts need to center the pop-up layer
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 parts make the entire page gray and 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 addition page
document.body.appendChild(procbg);
document.body.style.overflow = "hidden"; //Cancel the scroll bar

//The following parts implement the drag effect of the pop-up layer
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 popup 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);
}

This is used to implement dragging layers

As for some beautification effects, you can modify them yourself.

I hope this article will be helpful to everyone’s JavaScript programming design.