<!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript登陆弹窗，可拖拽</title> <style type="text/css"> * { margin:0; padding:0; } #box { 400px; height:200px; background:#f9f9f9; border:1px solid #ccc; position:absolute; left:50%; top:50%; margin:-100px 0 0 -200px; border-radius:4px; box-shadow:0 0 15px #ddd; } .title { padding:10px 20px; background-color:#f1f1f1; border-bottom:1px solid #ddd; font-size:14px; color:#333; } .login { padding:30px 0 0 50px; } .login p { margin-bottom:10px; font-size:14px; } .login input.text { 200px; padding:5px; border:1px solid #ddd; vertical-align:middle; } .login input.btn { 70px; padding:6px; border:1px solid #ddd; margin-left:41px; cursor:pointer; } </style> </head> <body> <div id="box"> <h2 class="title">用户登录</h2> <div class="login"> <form action=""> <p><label>账户：</label><input type="text" name="" id="" class="text"></p> <p><label>密码：</label><input type="text" name="" id="" class="text"></p> <p><input type="submit" name="" id="" value="提 交" class="btn"></p> </form> </div> </div> <script type="text/javascript"> window.onload = function(){ var oBox = document.getElementById("box"); var oBtn = oBox.getElementsByTagName("h2")[0]; var disX = 0; var disY = 0; oBtn.onmousedown = function(ev){ var oEvent = ev||event; disX = oEvent.clientX-oBox.offsetLeft; disY = oEvent.clientY-oBox.offsetTop; oBox.style.cursor = "crosshair"; document.onmousemove = function(ev){ var oEvent = ev||event; var l = oEvent.clientX-disX; var t = oEvent.clientY-disY; oBox.style.margin = 0; if(l<0){ l=0; }else if(l>document.documentElement.clientWidth-oBox.offsetWidth){ l=document.documentElement.clientWidth-oBox.offsetWidth; } if(t<0){ t=0; }else if(t>document.documentElement.clientHeight-oBox.offsetHeight){ t=document.documentElement.clientHeight-oBox.offsetHeight; } oBox.style.left = l+"px"; oBox.style.top = t+"px"; } document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; oBox.style.cursor = "default"; } return false; } window.onresize = function(){ if(oBox.offsetLeft>document.documentElement.clientWidth-oBox.offsetWidth){ oBox.style.left=document.documentElement.clientWidth-oBox.offsetWidth+"px"; } if(oBox.offsetTop>document.documentElement.clientHeight-oBox.offsetHeight){ oBox.style.top=document.documentElement.clientHeight-oBox.offsetHeight+"px"; } } } </script> </body> </html>