window.onload = function() { var btn = document.getElementsByClassName('login')[0] var close = document.getElementById('close'); var login = document.getElementById('login'); var top = (document.documentElement.clientHeight - 250) / 2; //top值等于(獲取頁面可視區域的寬度 - 登錄框的高度) / 2 var left = (document.documentElement.clientWidth - 350) / 2; var open = document.getElementById('screen'); btn.onclick = function() {  login.style.display = 'block';  login.style.left = left + 'px';  login.style.top = top + 'px';  open.style.display = 'block';  open.style.width = getInner().width + 'px'; //彈出層的寬度等于可視窗口的寬度  open.style.height = getInner().height + 'px'; } close.onclick = function() {  login.style.display = 'none';  open.style.display = 'none'; } window.onresize = function() {   var top = (getInner().height - 250) / 2;   var left = (getInner().width - 350) / 2;   login.style.left = left + 'px';   login.style.top = top + 'px';  }  //跨瀏覽器獲取可視窗口 function getInner() {  if (window.innerWidth != 'undefined') { //IE 不支持返回undefind   return {    width: window.innerWidth,    height: window.innerHeight   }  } else {   return {    width: document.documentElement.clientWidth,    height: document.documentElement.clientHeight   }  } } //實現拖拽功能 ，三個事件 mousemove , mouseup ,mousedown //clientX ,clientY 時鼠標指針相對于整個屏幕的坐標距離 //offsetLeft, offsetTop 獲取當前元素相對于父元素的位置,在這里，父元素是document login.onmousedown = function(e) {   stop(e); //阻止事件默認行為   var e = e || window.event;   var oLeft = e.clientX - login.offsetLeft; //login.offsetLeft 獲取盒子邊框到瀏覽器左邊框的距離   var otop = e.clientY - login.offsetTop;   document.onmousemove = function(e) { //移動的是整體的doucment    var e = e || window.event;    //不能移出可視區域    var left = e.clientX - oLeft;    var top = e.clientY - otop;    //左右    if (left < 0) { //如果盒子距左邊的距離小于零，即超出     left = 0;    } else if (left > getInner().width - login.offsetWidth) { //可視區域的長度，減去盒子的長度 offsetWidth     left = getInner().width - login.offsetWidth;    }    //上下    if (top < 0) {     top = 0;    } else if (top > getInner().height - login.offsetHeight) {     top = getInner().height - login.offsetHeight;    }    login.style.left = left + 'px';    login.style.top = top + 'px';   }   document.onmouseup = function() {    document.onmousemove = null;    document.onmouseup = null;   }  }  //取消默認行為 function stop(e) {  var e = e || window.event;  if (typeof e.preventDefault != 'undefined') {   e.preventDefault(); //W3C  } else {   e.returnValue = false; //IE阻止事件默認行為  } }}

<div id="header"> <div class="logo"><img src="images/logo.gif" alt="" /></div> <div class="member">個人中心  <ul class="list">   <li><a href="###">設置</a></li>   <li><a href="###">換膚</a></li>   <li><a href="###">幫助</a></li>   <li><a href="###">退出</a></li>  </ul> </div> <div class="login">登錄</div></div><div id="login"> <h2><img src="images/close.png" alt="" class="close" id="close" />登錄</h2> <div class="user">用戶名<input type="text" name="user" class="text" /></div> <div class="pass">密  碼   <input type="password" name="pass" class="text" /></div> <div class="button">  <input type="button" class="submit" value="" /></div> <div class="other">注冊新用戶 | 忘記密碼</div></div><div id="screen"></div><script type="text/javascript" src="demo.js"></script>