js弹出层/框 收集

1、可关闭，不可拖动

 


   
   
    

    
    
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    2. 

    
    
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
    3. 

    
    
  3. <head>   
    4. 

    
    
  4. <meta http-equiv="Content-Type" content="text/html; charset=GBK" />   
    5. 

    
    
  5. <title>JS弹出层</title>   
    6. 

    
    
  6. <script language="javascript"> 
    7. 

    
    
  7. <!--   
    8. 

    
    
  8. function BOX_show(e){                                   //显示 
    9. 

    
    
  9.     if(document.getElementById(e)==null){    
    10. 

    
    
  10.         return ;    
    11. 

    
    
  11.     }    
    12. 

    
    
  12.     var selects = document.getElementsByTagName('select');    
    13. 

    
    
  13.     for(i = 0; i < selects.length; i++){    
    14. 

    
    
  14.         selects[i].style.visibility = "hidden";    
    15. 

    
    
  15.     }     
    16. 

    
    
  16.   
    17. 

    
    
  17.     BOX_layout(e);    
    18. 

    
    
  18.     window.onresize = function(){BOX_layout(e);}        //改变窗体重新调整位置    
    19. 

    
    
  19.     window.onscroll = function(){BOX_layout(e);}        //滚动窗体重新调整位置    
    20. 

    
    
  20.     document.onkeyup = function(event){    
    21. 

    
    
  21.         var evt = window.event || event;    
    22. 

    
    
  22.         var code = evt.keyCode?evt.keyCode : evt.which;    
    23. 

    
    
  23.         //alert(code);    
    24. 

    
    
  24.   
    25. 

    
    
  25.         if(code == 27){    
    26. 

    
    
  26.             BOX_remove(e);    
    27. 

    
    
  27.         }    
    28. 

    
    
  28.     }    
    29. 

    
    
  29.   
    30. 

    
    
  30. }    
    31. 

    
    
  31.   
    32. 

    
    
  32. function BOX_remove(e){                                 //移除 
    33. 

    
    
  33.     window.onscroll = null;    
    34. 

    
    
  34.     window.onresize = null;    
    35. 

    
    
  35.     document.getElementById('BOX_overlay').style.display="none";    
    36. 

    
    
  36.     document.getElementById(e).style.display="none";    
    37. 

    
    
  37.   
    38. 

    
    
  38.     var selects = document.getElementsByTagName('select');    
    39. 

    
    
  39.     for(i = 0; i < selects.length; i++){    
    40. 

    
    
  40.         selects[i].style.visibility = "visible";    
    41. 

    
    
  41.     }    
    42. 

    
    
  42. }    
    43. 

    
    
  43.   
    44. 

    
    
  44. function BOX_layout(e){                                 //调整位置    
    45. 

    
    
  45.     var a = document.getElementById(e);    
    46. 

    
    
  46.   
    47. 

    
    
  47.     if (document.getElementById('BOX_overlay')==null){  //判断是否新建遮掩层      
    48. 

    
    
  48.   
    49. 

    
    
  49.         var overlay = document.createElement("div");    
    50. 

    
    
  50.         overlay.setAttribute('id','BOX_overlay');    
    51. 

    
    
  51.   
    52. 

    
    
  52.         //overlay.onclick=function(){BOX_remove(e);};    
    53. 

    
    
  53.         //a.parentNode.appendChild(overlay);    
    54. 

    
    
  54.         document.body.appendChild(overlay);    
    55. 

    
    
  55.     }    
    56. 

    
    
  56.   
    57. 

    
    
  57.     document.getElementById('BOX_overlay').ondblclick=function(){BOX_remove(e);};       
    58. 

    
    
  58.     var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);    //取客户端左上坐标，宽，高 
    59. 

    
    
  59.     var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);    
    60. 

    
    
  60.   
    61. 

    
    
  61.     var clientWidth;    
    62. 

    
    
  62.     if (window.innerWidth){    
    63. 

    
    
  63.         clientWidth = window.innerWidth;    
    64. 

    
    
  64.        // clientWidth = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth));    
    65. 

    
    
  65.     }    
    66. 

    
    
  66.     else{    
    67. 

    
    
  67.         clientWidth = document.documentElement.clientWidth;    
    68. 

    
    
  68.     }    
    69. 

    
    
  69.   
    70. 

    
    
  70.     var clientHeight;    
    71. 

    
    
  71.     if (window.innerHeight){    
    72. 

    
    
  72.         clientHeight = window.innerHeight;    
    73. 

    
    
  73.         //clientHeight = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerHeight : Math.min(window.innerHeight, document.documentElement.clientHeight));    
    74. 

    
    
  74.     } 
    75. 

    
    
  75.     else{    
    76. 

    
    
  76.         clientHeight = document.documentElement.clientHeight;    
    77. 

    
    
  77.     }    
    78. 

    
    
  78.   
    79. 

    
    
  79.     var bo = document.getElementById('BOX_overlay');    
    80. 

    
    
  80.     bo.style.left = scrollLeft+'px';    
    81. 

    
    
  81.     bo.style.top = scrollTop+'px';    
    82. 

    
    
  82.     bo.style.width = clientWidth+'px';    
    83. 

    
    
  83.     bo.style.height = clientHeight+'px';    
    84. 

    
    
  84.     bo.style.display="";   
    85. 

    
    
  85.     a.style.position = 'absolute';                      //Popup窗口定位  
    86. 

    
    
  86.     a.style.zIndex=999;    
    87. 

    
    
  87.     a.style.display="";    
    88. 

    
    
  88.     //a.style.left = scrollLeft+((clientWidth-a.offsetWidth)/2)+'px';    
    89. 

    
    
  89.     //a.style.top = scrollTop+((clientHeight-a.offsetHeight)/2)+'px';    
    90. 

    
    
  90. }    
    91. 

    
    
  91.   
    92. 

    
    
  92. function HiddenButton(e){    
    93. 

    
    
  93.     e.style.visibility='hidden';    
    94. 

    
    
  94.     e.coolcodeviousSibling.style.visibility='visible'   
    95. 

    
    
  95. } 
    96. 

    
    
  96. //-->  
    97. 

    
    
  97. </script>   
    98. 

    
    
  98. <style type="text/css"> 
    99. 

    
    
  99. <!-- 
    100. 

    
    
  100. #BOX_overlay{position: absolute;z-index:100;top:0px;left:0px;background-color:#ccc;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;} 
    101. 

    
    
  101. --> 
    102. 

    
    
  102. </style>   
    103. 

    
    
  103. </head>   
    104. 

    
    
  104.   
    105. 

    
    
  105. <body> 
    106. 

    
    
  106.  
    107. 

    
    
  107. <p onClick="BOX_show('messdiv')" style="cursor:pointer;">点击弹出层</p> 
    108. 

    
    
  108.  
    109. 

    
    
  109. <div id="messdiv" style="position:absolute; display:none; top:135px; left:350px; width:560px; padding:10px 20px 0; background:#369;text-align:left; border:2px solid #5d3f0c;z-index:999; font-size:12px;">   
    110. 

    
    
  110.     <p style="text-align:right; margin:0; padding:0; line-height:14px; float:right;"> 
    111. 

    
    
  111.         <a href="javascript:void(0)" title="关闭" style="line-height:14px;font-size:12px; color:#333;" onclick="BOX_remove('messdiv')" target="_self">关闭</a> 
    112. 

    
    
  112.     </p>   
    113. 

    
    
  113.     <br /><br /><br /><br /> 
    114. 

    
    
  114.     这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容 
    115. 

    
    
  115.     <br /><br /><br /><br /> 
    116. 

    
    
  116.     <br /><br /><br /><br />   
    117. 

    
    
  117.     <div style="width:176px;padding:0 120px;overflow:hidden;margin:10px auto 20px;">   
    118. 

    
    
  118.         <a href="javascript:void(0)" onclick="BOX_remove('messdiv')" target="_self" style=" background:#fff;float:left; width:70px;height:20px;padding:5px 0 0 10px;margin-right:10px;">关闭</a>   
    119. 

    
    
  119.         <a href="javascript:void(0)" onClick="BOX_remove('messdiv')" target="_self" style=" background:#fff;float:left;width:70px;height:20px;padding:5px 0 0 10px;">取消</a>   
    120. 

    
    
  120.     </div>   
    121. 

    
    
  121.     <div style="clear:both;"></div>   
    122. 

    
    
  122. </div>   
    123. 

    
    
  123. <div id="BOX_overlay"></div> 
    124. 

    
    
  124.  
    125. 

    
    
  125. </body>   
    126. 

    
    
  126. </html>   
    127.

 

2、可关闭，可拖动，不可拉伸

 

 


   
   
    

    
    
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 

    
    
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 

    
    
  3. <head> 
    4. 

    
    
  4. <title>弹出层并可拖拽</title> 
    5. 

    
    
  5. <style> 
    6. 

    
    
  6. html,body{height:100%;overflow:hidden;} 
    7. 

    
    
  7. body,div,h2{margin:0;padding:0;} 
    8. 

    
    
  8. body{font:12px/1.5 Tahoma;} 
    9. 

    
    
  9. center{padding-top:10px;} 
    10. 

    
    
  10. button{cursor:pointer;} 
    11. 

    
    
  11. #overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;} 
    12. 

    
    
  12. #win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;} 
    13. 

    
    
  13. h2{font-size:12px;height:18px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;cursor:move;} 
    14. 

    
    
  14. h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;} 
    15. 

    
    
  15. </style> 
    16. 

    
    
  16. <script> 
    17. 

    
    
  17. window.onload = function () 
    18. 

    
    
  18. { 
    19. 

    
    
  19.     var oWin = document.getElementById("win"); 
    20. 

    
    
  20.     var oLay = document.getElementById("overlay");   
    21. 

    
    
  21.     var oBtn = document.getElementsByTagName("button")[0]; 
    22. 

    
    
  22.     var oClose = document.getElementById("close"); 
    23. 

    
    
  23.     var oH2 = oWin.getElementsByTagName("h2")[0]; 
    24. 

    
    
  24.     var bDrag = false; 
    25. 

    
    
  25.     var disX = disY = 0; 
    26. 

    
    
  26.     oBtn.onclick = function () 
    27. 

    
    
  27.     { 
    28. 

    
    
  28.         oLay.style.display = "block"; 
    29. 

    
    
  29.         oWin.style.display = "block"     
    30. 

    
    
  30.     }; 
    31. 

    
    
  31.     oClose.onclick = function () 
    32. 

    
    
  32.     { 
    33. 

    
    
  33.         oLay.style.display = "none"; 
    34. 

    
    
  34.         oWin.style.display = "none" 
    35. 

    
    
  35.          
    36. 

    
    
  36.     }; 
    37. 

    
    
  37.     oClose.onmousedown = function (event) 
    38. 

    
    
  38.     { 
    39. 

    
    
  39.         (event || window.event).cancelBubble = true; 
    40. 

    
    
  40.     }; 
    41. 

    
    
  41.     oH2.onmousedown = function (event) 
    42. 

    
    
  42.     {        
    43. 

    
    
  43.         var eventevent = event || window.event; 
    44. 

    
    
  44.         bDrag = true; 
    45. 

    
    
  45.         disX = event.clientX - oWin.offsetLeft; 
    46. 

    
    
  46.         disY = event.clientY - oWin.offsetTop;       
    47. 

    
    
  47.         this.setCapture && this.setCapture();        
    48. 

    
    
  48.         return false 
    49. 

    
    
  49.     }; 
    50. 

    
    
  50.     document.onmousemove = function (event) 
    51. 

    
    
  51.     { 
    52. 

    
    
  52.         if (!bDrag) return; 
    53. 

    
    
  53.         var eventevent = event || window.event; 
    54. 

    
    
  54.         var iL = event.clientX - disX; 
    55. 

    
    
  55.         var iT = event.clientY - disY; 
    56. 

    
    
  56.         var maxL = document.documentElement.clientWidth - oWin.offsetWidth; 
    57. 

    
    
  57.         var maxT = document.documentElement.clientHeight - oWin.offsetHeight;        
    58. 

    
    
  58.         iLiL = iL < 0 ? 0 : iL; 
    59. 

    
    
  59.         iLiL = iL > maxL ? maxL : iL;          
    60. 

    
    
  60.         iTiT = iT < 0 ? 0 : iT; 
    61. 

    
    
  61.         iTiT = iT > maxT ? maxT : iT; 
    62. 

    
    
  62.          
    63. 

    
    
  63.         oWinoWin.style.marginTop = oWin.style.marginLeft = 0; 
    64. 

    
    
  64.         oWin.style.left = iL + "px"; 
    65. 

    
    
  65.         oWin.style.top = iT + "px";      
    66. 

    
    
  66.         return false 
    67. 

    
    
  67.     }; 
    68. 

    
    
  68.     document.onmouseup = window.onblur = oH2.onlosecapture = function () 
    69. 

    
    
  69.     { 
    70. 

    
    
  70.         bDrag = false;               
    71. 

    
    
  71.         oH2.releaseCapture && oH2.releaseCapture(); 
    72. 

    
    
  72.     }; 
    73. 

    
    
  73. }; 
    74. 

    
    
  74. </script> 
    75. 

    
    
  75. </head> 
    76. 

    
    
  76. <body> 
    77. 

    
    
  77. <div id="overlay"></div> 
    78. 

    
    
  78. <div id="win"><h2><span id="close">×</span></h2></div> 
    79. 

    
    
  79. <center><button>弹出层</button></center> 
    80. 

    
    
  80. </body> 
    81. 

    
    
  81. </html> 
    82.

 

3、可关闭、可拖动、可拉伸

 注：当中有三个图片，可打包下载

 


   
   
    

    
    
  1. <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> 
    2. 

    
    
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 

    
    
  3. <head> 
    4. 

    
    
  4. <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 
    5. 

    
    
  5. <title>可拖拽变大小的弹出层</title> 
    6. 

    
    
  6. <style> 
    7. 

    
    
  7. <!-- 
    8. 

    
    
  8. * { padding: 0; margin: 0; } 
    9. 

    
    
  9. li { list-style: none; } 
    10. 

    
    
  10. body { background: #eee; } 
    11. 

    
    
  11.  
    12. 

    
    
  12. .drag_layer { width: 450px; height: 270px; border: 1px solid #aaaaaa; padding: 3px; position: absolute; top: 0px; left: 0px; background: #fff; overflow:hidden; } 
    13. 

    
    
  13. .drag_layer h2 { height: 25px; line-height: 25px; padding-left: 10px; font-size: 14px; color: #333; background: url(images/title_bg.gif) repeat-x; border: 1px solid #aaaaaa; cursor: move; position: relative; } 
    14. 

    
    
  14. .drag_layer .close { width: 21px; height: 20px; background: url(images/close.gif) no-repeat 0 bottom; position: absolute; top: 2px; right: 3px; } 
    15. 

    
    
  15. .drag_layer .close:hover { background: url(images/close.gif) no-repeat 0 0; } 
    16. 

    
    
  16. .drag_layer .content { padding: 10px; overflow:auto; } 
    17. 

    
    
  17. .drag_layer .content p { font-size: 12px; line-height: 18px; color: #666; text-indent: 28px; padding-bottom: 10px; font-family: arial; } 
    18. 

    
    
  18.  
    19. 

    
    
  19. .drag { width: 14px; height: 14px; overflow: hidden; background: url(images/drag_ico.gif) no-repeat 1px 1px; cursor: nw-resize; position: absolute; top: 262px; right: 0; z-index: 2; } 
    20. 

    
    
  20. .bar_t { width: 410px; height: 4px; position: absolute; top: -2px; left: -2px; z-index: 1; cursor: n-resize; overflow: hidden; } 
    21. 

    
    
  21. .bar_b { width: 410px; height: 4px; position: absolute; bottom: -2px; left: -2px; z-index: 1; cursor: n-resize; overflow: hidden; } 
    22. 

    
    
  22. .bar_r { width: 4px; height: 110px; position: absolute; right: -2px; top: -2px; z-index: 1; cursor: e-resize; } 
    23. 

    
    
  23. .bar_l { width: 4px; height: 110px; position: absolute; left: -2px; top: -2px; z-index: 1; cursor: e-resize; } 
    24. 

    
    
  24. --> 
    25. 

    
    
  25. </style> 
    26. 

    
    
  26. <script> 
    27. 

    
    
  27. <!-- 
    28. 

    
    
  28. var oMsgbox=null; 
    29. 

    
    
  29. var g_orgTop=0; 
    30. 

    
    
  30. var g_orgHeight=0; 
    31. 

    
    
  31. var g_orgLeft=0; 
    32. 

    
    
  32. var g_orgWidth=0; 
    33. 

    
    
  33.  
    34. 

    
    
  34. var oContent=null; 
    35. 

    
    
  35. var oDragBoth=null; 
    36. 

    
    
  36. var oDragL=null; 
    37. 

    
    
  37. var oDragT=null; 
    38. 

    
    
  38. var oDragR=null; 
    39. 

    
    
  39. var oDragB=null; 
    40. 

    
    
  40.  
    41. 

    
    
  41. window.onload=function (){ 
    42. 

    
    
  42.     var oBtnClose=null; 
    43. 

    
    
  43.     var oH2Title=null; 
    44. 

    
    
  44.     var aDiv=null; 
    45. 

    
    
  45.     var fnDrag=null; 
    46. 

    
    
  46.     var i=0; 
    47. 

    
    
  47.      
    48. 

    
    
  48.     oMsgbox=document.getElementById('msgbox'); 
    49. 

    
    
  49.      
    50. 

    
    
  50.     oBtnClose=oMsgbox.getElementsByTagName('a')[0]; 
    51. 

    
    
  51.     oH2Title=oMsgbox.getElementsByTagName('h2')[0]; 
    52. 

    
    
  52.      
    53. 

    
    
  53.     aDiv=oMsgbox.getElementsByTagName('div'); 
    54. 

    
    
  54.      
    55. 

    
    
  55.     oBtnClose.onmousedown=function (){ 
    56. 

    
    
  56.         oMsgbox.style.display='none'; 
    57. 

    
    
  57.     }; 
    58. 

    
    
  58.      
    59. 

    
    
  59.     oMsgbox.style.left=(document.body.scrollLeft||document.documentElement.scrollLeft)+(document.documentElement.clientWidth-oMsgbox.offsetWidth)/2+'px'; 
    60. 

    
    
  60.     oMsgbox.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+(document.documentElement.clientHeight-oMsgbox.offsetHeight)/2+'px'; 
    61. 

    
    
  61.      
    62. 

    
    
  62.     new PerfectDraging 
    63. 

    
    
  63.     ( 
    64. 

    
    
  64.         oH2Title, 
    65. 

    
    
  65.         function (){ 
    66. 

    
    
  66.             return {x:oMsgbox.offsetLeft, y:oMsgbox.offsetTop}; 
    67. 

    
    
  67.         }, 
    68. 

    
    
  68.         function (x, y) 
    69. 

    
    
  69.         { 
    70. 

    
    
  70.             var iSTop=document.body.scrollTop || document.documentElement.scrollTop; 
    71. 

    
    
  71.              
    72. 

    
    
  72.             if(x<0){ 
    73. 

    
    
  73.                 x=0; 
    74. 

    
    
  74.             } 
    75. 

    
    
  75.             else if(x+oMsgbox.offsetWidth>document.documentElement.clientWidth){ 
    76. 

    
    
  76.                 x=document.body.clientWidth-oMsgbox.offsetWidth; 
    77. 

    
    
  77.             } 
    78. 

    
    
  78.              
    79. 

    
    
  79.             if(y<iSTop){ 
    80. 

    
    
  80.                 y=iSTop; 
    81. 

    
    
  81.             } 
    82. 

    
    
  82.             else if(y+oMsgbox.offsetHeight>document.documentElement.clientHeight+iSTop){ 
    83. 

    
    
  83.                 y=document.documentElement.clientHeight-oMsgbox.offsetHeight+iSTop; 
    84. 

    
    
  84.             } 
    85. 

    
    
  85.             oMsgbox.style.left=x+'px'; 
    86. 

    
    
  86.             oMsgbox.style.top=y+'px'; 
    87. 

    
    
  87.         } 
    88. 

    
    
  88.     ); 
    89. 

    
    
  89.     /* Download by http://www.codefans.net */ 
    90. 

    
    
  90.     for(i=0;i<aDiv.length;i++){ 
    91. 

    
    
  91.         fnDrag=null; 
    92. 

    
    
  92.         switch(aDiv[i].className){ 
    93. 

    
    
  93.             case 'drag': 
    94. 

    
    
  94.                 fnDrag=doBothDrag; 
    95. 

    
    
  95.                 oDragBoth=aDiv[i]; 
    96. 

    
    
  96.                 break; 
    97. 

    
    
  97.             case 'bar_t': 
    98. 

    
    
  98.                 fnDrag=doTDrag; 
    99. 

    
    
  99.                 oDragT=aDiv[i]; 
    100. 

    
    
  100.                 break; 
    101. 

    
    
  101.             case 'bar_r': 
    102. 

    
    
  102.                 fnDrag=doRDrag; 
    103. 

    
    
  103.                 oDragR=aDiv[i]; 
    104. 

    
    
  104.                 break; 
    105. 

    
    
  105.             case 'bar_b': 
    106. 

    
    
  106.                 fnDrag=doBDrag; 
    107. 

    
    
  107.                 oDragB=aDiv[i]; 
    108. 

    
    
  108.                 break; 
    109. 

    
    
  109.             case 'bar_l': 
    110. 

    
    
  110.                 fnDrag=doLDrag; 
    111. 

    
    
  111.                 oDragL=aDiv[i]; 
    112. 

    
    
  112.                 break; 
    113. 

    
    
  113.             case 'content': 
    114. 

    
    
  114.                 oContent=aDiv[i]; 
    115. 

    
    
  115.                 break; 
    116. 

    
    
  116.         } 
    117. 

    
    
  117.          
    118. 

    
    
  118.         if(!fnDrag){ 
    119. 

    
    
  119.             continue; 
    120. 

    
    
  120.         } 
    121. 

    
    
  121.          
    122. 

    
    
  122.         new PerfectDraging 
    123. 

    
    
  123.         ( 
    124. 

    
    
  124.             aDiv[i], 
    125. 

    
    
  125.             function () 
    126. 

    
    
  126.             { 
    127. 

    
    
  127.                 g_orgTop=oMsgbox.offsetTop; 
    128. 

    
    
  128.                 g_orgHeight=oMsgbox.offsetHeight; 
    129. 

    
    
  129.                 g_orgLeft=oMsgbox.offsetLeft; 
    130. 

    
    
  130.                 g_orgWidth=oMsgbox.offsetWidth; 
    131. 

    
    
  131.                 return {x:oMsgbox.offsetWidth, y:oMsgbox.offsetHeight}; 
    132. 

    
    
  132.             }, 
    133. 

    
    
  133.             fnDrag 
    134. 

    
    
  134.             /*function (x, y) 
    135. 

    
    
  135.             { 
    136. 

    
    
  136.                 fnDrag(x, y); 
    137. 

    
    
  137.             }*/ 
    138. 

    
    
  138.         ); 
    139. 

    
    
  139.     } 
    140. 

    
    
  140. }; 
    141. 

    
    
  141.  
    142. 

    
    
  142. function doBothDrag(x, y){ 
    143. 

    
    
  143.     if(x<110){ 
    144. 

    
    
  144.         x=110; 
    145. 

    
    
  145.     } 
    146. 

    
    
  146.      
    147. 

    
    
  147.     oMsgbox.style.width=x-8+'px'; 
    148. 

    
    
  148.     oDragT.style.width=x+'px'; 
    149. 

    
    
  149.     oDragB.style.width=x+'px'; 
    150. 

    
    
  150.      
    151. 

    
    
  151.     if(y<35){ 
    152. 

    
    
  152.         y=35; 
    153. 

    
    
  153.     } 
    154. 

    
    
  154.      
    155. 

    
    
  155.     oMsgbox.style.height=y-8+'px'; 
    156. 

    
    
  156.     oDragL.style.height=y+'px'; 
    157. 

    
    
  157.     oDragR.style.height=y+'px'; 
    158. 

    
    
  158.     oDragBoth.style.top=y-16+'px'; 
    159. 

    
    
  159. } 
    160. 

    
    
  160.  
    161. 

    
    
  161. function doTDrag(x, y){ 
    162. 

    
    
  162.     var h=2*g_orgHeight-y; 
    163. 

    
    
  163.     if(h<35){ 
    164. 

    
    
  164.         h=35; 
    165. 

    
    
  165.     } 
    166. 

    
    
  166.      
    167. 

    
    
  167.     oMsgbox.style.top=g_orgTop+g_orgHeight-h+'px'; 
    168. 

    
    
  168.     oMsgbox.style.height=h-8+'px'; 
    169. 

    
    
  169.      
    170. 

    
    
  170.     oDragL.style.height=h+2+'px'; 
    171. 

    
    
  171.     oDragR.style.height=h+2+'px'; 
    172. 

    
    
  172.      
    173. 

    
    
  173.     oDragBoth.style.top=h-16+'px'; 
    174. 

    
    
  174. } 
    175. 

    
    
  175.  
    176. 

    
    
  176. function doRDrag(x, y){ 
    177. 

    
    
  177.     if(x<110){ 
    178. 

    
    
  178.         x=110; 
    179. 

    
    
  179.     } 
    180. 

    
    
  180.     oMsgbox.style.width=x-8+'px'; 
    181. 

    
    
  181.      
    182. 

    
    
  182.     oDragT.style.width=x+2+'px'; 
    183. 

    
    
  183.     oDragB.style.width=x+2+'px'; 
    184. 

    
    
  184. } 
    185. 

    
    
  185.  
    186. 

    
    
  186. function doBDrag(x, y){  
    187. 

    
    
  187.     if(y<35){ 
    188. 

    
    
  188.         y=35; 
    189. 

    
    
  189.     } 
    190. 

    
    
  190.     oMsgbox.style.height=y-8+'px'; 
    191. 

    
    
  191.      
    192. 

    
    
  192.     oDragL.style.height=y+2+'px'; 
    193. 

    
    
  193.     oDragR.style.height=y+2+'px'; 
    194. 

    
    
  194.      
    195. 

    
    
  195.     oDragBoth.style.top=y-16+'px'; 
    196. 

    
    
  196. } 
    197. 

    
    
  197.  
    198. 

    
    
  198. function doLDrag(x, y){ 
    199. 

    
    
  199.     var w=2*g_orgWidth-x; 
    200. 

    
    
  200.     if(w<110){ 
    201. 

    
    
  201.         w=110; 
    202. 

    
    
  202.     } 
    203. 

    
    
  203.     oMsgbox.style.left=g_orgLeft+g_orgWidth-w+'px'; 
    204. 

    
    
  204.     oMsgbox.style.width=w-8+'px'; 
    205. 

    
    
  205.      
    206. 

    
    
  206.     oDragT.style.width=w+2+'px'; 
    207. 

    
    
  207.     oDragB.style.width=w+2+'px'; 
    208. 

    
    
  208. } 
    209. 

    
    
  209.  
    210. 

    
    
  210. function PerfectDraging(oElement, fnGetPos, fnOnDrag){ 
    211. 

    
    
  211.     var obj=this; 
    212. 

    
    
  212.      
    213. 

    
    
  213.     this.oElement=oElement; 
    214. 

    
    
  214.     this.fnGetPos=fnGetPos; 
    215. 

    
    
  215.     this.fnOnDrag=fnOnDrag; 
    216. 

    
    
  216.     this.__oStartOffset__={x:0, y:0}; 
    217. 

    
    
  217.      
    218. 

    
    
  218.     this.fnOnMouseUp=function (ev){ 
    219. 

    
    
  219.         obj.stopDrag(window.event || ev); 
    220. 

    
    
  220.     }; 
    221. 

    
    
  221.      
    222. 

    
    
  222.     this.fnOnMouseMove=function (ev){ 
    223. 

    
    
  223.         obj.doDrag(window.event || ev); 
    224. 

    
    
  224.     }; 
    225. 

    
    
  225.      
    226. 

    
    
  226.     this.oElement.onmousedown=function (ev){ 
    227. 

    
    
  227.         obj.startDrag(window.event || ev); 
    228. 

    
    
  228.     }; 
    229. 

    
    
  229. } 
    230. 

    
    
  230.  
    231. 

    
    
  231. PerfectDraging.prototype.startDrag=function (oEvent){ 
    232. 

    
    
  232.     var oPos=this.fnGetPos(); 
    233. 

    
    
  233.     //var x=oEvent.pageX || oEvent.x; 
    234. 

    
    
  234.     //var y=oEvent.pageY || oEvent.y; 
    235. 

    
    
  235.     var x=oEvent.clientX; 
    236. 

    
    
  236.     var y=oEvent.clientY; 
    237. 

    
    
  237.      
    238. 

    
    
  238.     this.__oStartOffset__.x=x-oPos.x; 
    239. 

    
    
  239.     this.__oStartOffset__.y=y-oPos.y; 
    240. 

    
    
  240.      
    241. 

    
    
  241.     if(this.oElement.setCapture){ 
    242. 

    
    
  242.         this.oElement.setCapture(); 
    243. 

    
    
  243.          
    244. 

    
    
  244.         thisthis.oElement.onmouseup=this.fnOnMouseUp; 
    245. 

    
    
  245.         thisthis.oElement.onmousemove=this.fnOnMouseMove; 
    246. 

    
    
  246.     } 
    247. 

    
    
  247.     else{ 
    248. 

    
    
  248.         document.addEventListener("mouseup", this.fnOnMouseUp, true); 
    249. 

    
    
  249.         document.addEventListener("mousemove", this.fnOnMouseMove, true); 
    250. 

    
    
  250.          
    251. 

    
    
  251.         window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); 
    252. 

    
    
  252.     } 
    253. 

    
    
  253. }; 
    254. 

    
    
  254.  
    255. 

    
    
  255. PerfectDraging.prototype.stopDrag=function (oEvent){ 
    256. 

    
    
  256.     if(this.oElement.releaseCapture){ 
    257. 

    
    
  257.         this.oElement.releaseCapture(); 
    258. 

    
    
  258.          
    259. 

    
    
  259.         this.oElement.onmouseup=null; 
    260. 

    
    
  260.         this.oElement.onmousemove=null; 
    261. 

    
    
  261.     } 
    262. 

    
    
  262.     else{ 
    263. 

    
    
  263.         document.removeEventListener("mouseup", this.fnOnMouseUp, true); 
    264. 

    
    
  264.         document.removeEventListener("mousemove", this.fnOnMouseMove, true); 
    265. 

    
    
  265.          
    266. 

    
    
  266.         window.releaseEvents(Event.MOUSE_MOVE | Event.MOUSE_UP); 
    267. 

    
    
  267.     } 
    268. 

    
    
  268. }; 
    269. 

    
    
  269.  
    270. 

    
    
  270. PerfectDraging.prototype.doDrag=function (oEvent){ 
    271. 

    
    
  271.     //var x=oEvent.pageX || oEvent.x; 
    272. 

    
    
  272.     //var y=oEvent.pageY || oEvent.y; 
    273. 

    
    
  273.     var x=oEvent.clientX; 
    274. 

    
    
  274.     var y=oEvent.clientY; 
    275. 

    
    
  275.      
    276. 

    
    
  276.     this.fnOnDrag(x-this.__oStartOffset__.x, y-this.__oStartOffset__.y); 
    277. 

    
    
  277. }; 
    278. 

    
    
  278. //--> 
    279. 

    
    
  279. </script> 
    280. 

    
    
  280. </head> 
    281. 

    
    
  281.  
    282. 

    
    
  282. <body style="height:2000px;"> 
    283. 

    
    
  283.  
    284. 

    
    
  284. <div id="msgbox" class="drag_layer"> 
    285. 

    
    
  285.     <h2> 
    286. 

    
    
  286.         标题 
    287. 

    
    
  287.         <a href="#" class="close" title="关闭"></a> 
    288. 

    
    
  288.     </h2> 
    289. 

    
    
  289.     <div class="content"> 
    290. 

    
    
  290.         内容 
    291. 

    
    
  291.     </div> 
    292. 

    
    
  292.  
    293. 

    
    
  293.     <div class="drag"></div> 
    294. 

    
    
  294.     <div class="bar_t"></div> 
    295. 

    
    
  295.     <div class="bar_r"></div> 
    296. 

    
    
  296.     <div class="bar_b"></div> 
    297. 

    
    
  297.     <div class="bar_l"></div> 
    298. 

    
    
  298. </div> 
    299. 

    
    
  299.  
    300. 

    
    
  300. </body> 
    301. 

    
    
  301. </html> 
    302.

 

4、可拖动

此弹出层非常实用，源码分析见：

http://xuqin.blog.51cto.com/5183168/984397