弹出窗口、遮罩、拖动、上下左右居中

Submitted by 爱得 on 2010, January 13, 9:00 AM. Web标准

前天参考51js一位牛人而整理的一个效果.

因这效果现下比较适用,所以先行试练.总体上没超过原作的思想,能力有限...

看代码吧

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>弹出窗口 遮罩 能拖动 上下左右居中</title>  
  6. <style type="text/css">  
  7. <!--   
  8. /*   
  9. Style Name:Css reseat   
  10. Author: 爱得太迟   
  11. Email: sika2278@163.com   
  12. http://www.lusisi.com/   
  13. */   
  14. html{height:100%;}   
  15. body {font-family:"SimSun","Arial",Helvetica,sans-serif;font-size:12px;height:100%;}   
  16. body,div,dl, t,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form, fieldset,legend,input,button,textarea,p,blockquote,th,td {margin:0;padding:0;}   
  17. input,button,textarea {border:none;}   
  18. fieldset,img {border:0;}   
  19. table {border-collapse: collapse;border-spacing:0;}   
  20. ul,ol {list-style:none;}   
  21. a {text-decoration:none;}   
  22. a:hover {text-decoration:none;}   
  23.   
  24. /* 清除浮动　*/   
  25. .clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}   
  26.   
  27. #dt_1{cursor: pointer;width:40px;height:24px;line-height:24px;margin:0px auto;}   
  28. #bodyBg{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background-color: #aaa;z-index: 10;filter: alpha(opacity=80);opacity:0.8;}   
  29. #maiBox{position: absolute;width: 300px;height: 150px;background-color: #fefefe;border:1px solid #f4f4f4;z-index: 20;text-indent:12px;}   
  30. #loginBox{width: 100%;height: 24px;line-height:24px;background-color: #f4f4f4;cursor: move;}   
  31. .aiTable{margin:10px 10px 0px;height:42px;width:242px;position:relative;}   
  32. .aiTable li{height:24px;line-height:24px;}   
  33. .aiTable li label{display:inline-block;width:60px;}   
  34. .aiTable li.aisubmit{position:absolute;left:170px;top:4px;}   
  35. .aoie{border:1px solid #f4f4f4;width:106px;}   
  36. .aiinput{text-align:center;margin-top:10px;}   
  37. .aiinput input{margin-bottom:6px;padding:0 1px;}   
  38. #subLogin{height:40px;width:70px}   
  39. .wanji{text-align:center;margin-top:12px;}   
  40. .wanji a{display:inline-block;margin-right:6px;}   
  41.   -->  
  42. </style>  
  43. </head>  
  44. <body>  
  45. <p id="dt_1">登录</p>  
  46.   
  47. <div id="bodyBg" style="display:none;"></div>  
  48. <div id="maiBox" style="top:-900px;left:-900px;">  
  49. <div id="loginBox">用户登录</div>  
  50. <form action="#" method="">  
  51. <ul class="aiTable">  
  52.     <li><label for="username">用户名:</label><input type="text" id="username" name="username" class="aoie" /></li>  
  53.     <li><label for="password">密  码:</label><input type="password" name="password" id="password" class="aoie" /></li>  
  54.     <li class="aisubmit"><label><input type="submit" name="submit" value="登录" id="subLogin" /></label></li>  
  55. </ul>  
  56. </form>  
  57. <div class="wanji"><a href="#">忘记密码</a><a href="#">注册</a></div>  
  58. <p class="aiinput"><a id="aiclose" href="#">关闭</a></p>  
  59. </div>  
  60.   
  61. <script type="text/javascript">  
  62. <!--   
  63. for(var i=1;i<=2;i++)   
  64. {   
  65. eval("var dt_" + i + " = document.getElementById('dt_" + i + "')");   
  66. }   
  67. var bodyBg = document.getElementById("bodyBg");   
  68. var maiBox = document.getElementById("maiBox");   
  69. var loginBox = document.getElementById("loginBox");   
  70. var boxh = document.getElementById("maiBox").scrollHeight;   
  71. var boxw = document.getElementById("maiBox").scrollWidth;   
  72. var winWidth = document.documentElement.clientWidth;   
  73. var winHeight =document.documentElement.clientHeight;   
  74. document.getElementById("aiclose").onclick = function()   
  75.     {   
  76.     hidden("maiBox");   
  77.     hidden("bodyBg");   
  78.     }   
  79.   
  80. //document.getElementById("subLogin").onclick = function()   
  81. //  {   
  82. //  hidden("maiBox");   
  83. //  hidden("bodyBg");   
  84. //  }   
  85.   
  86. dt_1.onclick = function()   
  87.     {   
  88.     maiBox.style.top = (winHeight-boxh)/2+"px";   
  89.     maiBox.style.left = (winWidth-boxw)/2+"px";   
  90.     show("maiBox");   
  91.     show("bodyBg")   
  92.     }   
  93.     //拖动信息   
  94.     loginBox.onmousedown = Down;   
  95.     var tHeight,lWidth;   
  96.     function Down(e)   
  97.     {   
  98.         var event = window.event || e;   
  99.         tHeight = event.clientY  - parseInt(maiBox.style.top.replace(/px/,""));   
  100.         lWidth  = event.clientX - parseInt(maiBox.style.left.replace(/px/,""));   
  101.         document.onmousemove = Move;   
  102.         document.onmouseup   = Up;   
  103.     }   
  104.     function Move(e) {   
  105.         var event = window.event || e;   
  106.         var top = event.clientY - tHeight;   
  107.         var left = event.clientX - lWidth;   
  108.         //判断 top 和 left 是否超出边界   
  109.         toptop = top < 0 ? 0 : top;   
  110.         toptop = top > document.body.offsetHeight - 150 ? document.body.offsetHeight - 150 : top;   
  111.         leftleft = left < 0 ? 0 : left;   
  112.         leftleft = left > document.body.offsetWidth - 300 ? document.body.offsetWidth - 300 : left;   
  113.         maiBox.style.top  = top + "px";   
  114.         maiBox.style.left = left +"px";   
  115.     }   
  116.     function Up() {   
  117.         document.onmousemove = null;   
  118.     }   
  119.   
  120. function show(ele)   
  121.     {   
  122.       eval(ele + ".style.display = ''");   
  123.     }   
  124. function hidden(ele)   
  125.     {   
  126.       eval(ele + ".style.display = 'none'");   
  127.     }   
  128. //-->  
  129. </script>  
  130.   
  131. </body>  
  132. </html>  

 这里有 demo

Tags: web标准, 拖动, 居中, 弹窗

« 上一篇 | 下一篇 »

发表评论

注:网址请加上 http:// 若无,报错...

评论内容 (必填):