The example of this article describes the JS pop-up can be dragged and closed div layer Complete implementation method. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>js popup can be dragged to close the div layer </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;p adding:5px;cursor: Move;}
H2 Span{color: #f90; Cursor:pointer;background: #fff; border:1px solid #f90;p adding: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.documentelement.clientwidth-owin.offsetwidth;
var maxt = document.documentelement.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>
<body>
<div id= "Win" ><center><button> Pop-up layer </button></center>
</body>
I hope this article will help you with your JavaScript programming.