JS pop-up complete div layer instance 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, for more information, see
This article describes the complete implementation of the div layer that can be dragged and closed in JS. Share it with you for your reference. The specific implementation method is as follows:
The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> JS pop-up div layer that can be dragged and closed </title>
<Style>
Html, body {height: 100%; overflow: hidden ;}
Body, div, h2 {margin: 0; padding: 0 ;}
Body {font: 12px/1.5 Tahoma ;}
Center {padding-top: 10px ;}
Button {cursor: pointer ;}
# Win {position: absolute; top: 50%; left: 50%; width: 400px; height: 200px; background: # fff; border: 4px solid # f90; margin: -102px 0 0-202px; display: none ;}
H2 {font-size: 12px; height: 18px; text-align: right; background: # FC0; border-bottom: 3px solid # f90; padding: 5px; cursor: move ;}
H2 span {color: # f90; cursor: pointer; background: # fff; border: 1px solid # f90; padding: 0 2px ;}
</Style>
<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>
</Head>
<Body>
<Div id = "win"> <Center> <button> pop-up layer </button> </center>
</Body>
</Html>
I hope this article will help you design javascript programs.
