Javascript pop-up complete case_javascript skills for the div layer that can be dragged and closed

This article mainly introduces the complete implementation method of the div layer that can be dragged and closed in JS, including the style and function implementation skills of the div pop-up layer, which is of great practical value, if you need it, refer to the example in this article to describe the complete implementation of the p layer that can be dragged and closed in JS pop-up. Share it with you for your reference. The specific implementation method is as follows:

The Code is as follows:

JS pop-up can be dragged to close the p Layer

Script
Window. onload = function ()
{
Var oWin = document. getElementById ("win ");
Var oBtn = document. getElementsByTagName ("button") [0];
Var oClose = document. getElementById ("close ");
Var oH2 = oWin. getElementsByTagName ("h2") [0];
Var bDrag = false;
Var disX = disY = 0;
OBtn. onclick = function ()
{
OWin. style. display = "block"
};
OClose. onclick = function ()
{
OWin. style. display = "none"

};
OClose. onmousedown = function (event)
{
(Event | window. event). cancelBubble = true;
};
OH2.onmousedown = function (event)
{
Var event = event | window. event;
BDrag = true;
DisX = event. clientX-oWin. offsetLeft;
DisY = event. clientY-oWin. offsetTop;
This. setCapture & this. setCapture ();
Return false
};
Document. onmousemove = function (event)
{
If (! BDrag) return;
Var event = event | window. event;
Var iL = event. clientX-disX;
Var iT = event. clientY-disY;
Var maxL = document.doc umentElement. clientWidth-oWin. offsetWidth;
Var maxT = document.doc umentElement. clientHeight-oWin. offsetHeight;
IL = iL <0? 0: iL;
IL = iL> maxL? MaxL: iL;
IT = iT <0? 0: iT;
IT = iT> maxT? MaxT: iT;

OWin. style. marginTop = oWin. style. marginLeft = 0;
OWin. style. left = iL + "px ";
OWin. style. top = iT + "px ";
Return false
};
Document. onmouseup = window. onblur = oH2.onlosecapture = function ()
{
BDrag = false;
OH2.releaseCapture & oH2.releaseCapture ();
};
};
Script

×

Pop-up layer

I hope this article will help you design javascript programs.