js弹出层/框 收集

1、可关闭，不可拖动

 

 
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=GBK" />   
  5. <title>JS弹出层</title>   
  6. <script language="javascript"> 
  7. <!--   
  8. function BOX_show(e){                                   //显示 
  9.     if(document.getElementById(e)==null){    
  10.         return ;    
  11.     }    
  12.     var selects = document.getElementsByTagName('select');    
  13.     for(i = 0; i < selects.length; i++){    
  14.         selects[i].style.visibility = "hidden";    
  15.     }     
  16.   
  17.     BOX_layout(e);    
  18.     window.onresize = function(){BOX_layout(e);}        //改变窗体重新调整位置    
  19.     window.onscroll = function(){BOX_layout(e);}        //滚动窗体重新调整位置    
  20.     document.onkeyup = function(event){    
  21.         var evt = window.event || event;    
  22.         var code = evt.keyCode?evt.keyCode : evt.which;    
  23.         //alert(code);    
  24.   
  25.         if(code == 27){    
  26.             BOX_remove(e);    
  27.         }    
  28.     }    
  29.   
  30. }    
  31.   
  32. function BOX_remove(e){                                 //移除 
  33.     window.onscroll = null;    
  34.     window.onresize = null;    
  35.     document.getElementById('BOX_overlay').style.display="none";    
  36.     document.getElementById(e).style.display="none";    
  37.   
  38.     var selects = document.getElementsByTagName('select');    
  39.     for(i = 0; i < selects.length; i++){    
  40.         selects[i].style.visibility = "visible";    
  41.     }    
  42. }    
  43.   
  44. function BOX_layout(e){                                 //调整位置    
  45.     var a = document.getElementById(e);    
  46.   
  47.     if (document.getElementById('BOX_overlay')==null){  //判断是否新建遮掩层      
  48.   
  49.         var overlay = document.createElement("div");    
  50.         overlay.setAttribute('id','BOX_overlay');    
  51.   
  52.         //overlay.onclick=function(){BOX_remove(e);};    
  53.         //a.parentNode.appendChild(overlay);    
  54.         document.body.appendChild(overlay);    
  55.     }    
  56.   
  57.     document.getElementById('BOX_overlay').ondblclick=function(){BOX_remove(e);};       
  58.     var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);    //取客户端左上坐标，宽，高 
  59.     var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);    
  60.   
  61.     var clientWidth;    
  62.     if (window.innerWidth){    
  63.         clientWidth = window.innerWidth;    
  64.        // clientWidth = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth));    
  65.     }    
  66.     else{    
  67.         clientWidth = document.documentElement.clientWidth;    
  68.     }    
  69.   
  70.     var clientHeight;    
  71.     if (window.innerHeight){    
  72.         clientHeight = window.innerHeight;    
  73.         //clientHeight = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerHeight : Math.min(window.innerHeight, document.documentElement.clientHeight));    
  74.     } 
  75.     else{    
  76.         clientHeight = document.documentElement.clientHeight;    
  77.     }    
  78.   
  79.     var bo = document.getElementById('BOX_overlay');    
  80.     bo.style.left = scrollLeft+'px';    
  81.     bo.style.top = scrollTop+'px';    
  82.     bo.style.width = clientWidth+'px';    
  83.     bo.style.height = clientHeight+'px';    
  84.     bo.style.display="";   
  85.     a.style.position = 'absolute';                      //Popup窗口定位  
  86.     a.style.zIndex=999;    
  87.     a.style.display="";    
  88.     //a.style.left = scrollLeft+((clientWidth-a.offsetWidth)/2)+'px';    
  89.     //a.style.top = scrollTop+((clientHeight-a.offsetHeight)/2)+'px';    
  90. }    
  91.   
  92. function HiddenButton(e){    
  93.     e.style.visibility='hidden';    
  94.     e.coolcodeviousSibling.style.visibility='visible'   
  95. } 
  96. //-->  
  97. </script>   
  98. <style type="text/css"> 
  99. <!-- 
  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. --> 
  102. </style>   
  103. </head>   
  104.   
  105. <body> 
  106.  
  107. <p onClick="BOX_show('messdiv')" style="cursor:pointer;">点击弹出层</p> 
  108.  
  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.     <p style="text-align:right; margin:0; padding:0; line-height:14px; float:right;"> 
  111.         <a href="javascript:void(0)" title="关闭" style="line-height:14px;font-size:12px; color:#333;" onclick="BOX_remove('messdiv')" target="_self">关闭</a> 
  112.     </p>   
  113.     <br /><br /><br /><br /> 
  114.     这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容 
  115.     <br /><br /><br /><br /> 
  116.     <br /><br /><br /><br />   
  117.     <div style="width:176px;padding:0 120px;overflow:hidden;margin:10px auto 20px;">   
  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.         <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.     </div>   
  121.     <div style="clear:both;"></div>   
  122. </div>   
  123. <div id="BOX_overlay"></div> 
  124.  
  125. </body>   
  126. </html>   
 
  
 
 
  
 
  
2、可关闭，可拖动，不可拉伸
 
  
 
 
  
 
  
 
 
  
 
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title>弹出层并可拖拽</title> 
  5. <style> 
  6. html,body{height:100%;overflow:hidden;} 
  7. body,div,h2{margin:0;padding:0;} 
  8. body{font:12px/1.5 Tahoma;} 
  9. center{padding-top:10px;} 
  10. button{cursor:pointer;} 
  11. #overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;} 
  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. h2{font-size:12px;height:18px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;cursor:move;} 
  14. h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;} 
  15. </style> 
  16. <script> 
  17. window.onload = function () 
  18. { 
  19.     var oWin = document.getElementById("win"); 
  20.     var oLay = document.getElementById("overlay");   
  21.     var oBtn = document.getElementsByTagName("button")[0]; 
  22.     var oClose = document.getElementById("close"); 
  23.     var oH2 = oWin.getElementsByTagName("h2")[0]; 
  24.     var bDrag = false; 
  25.     var disX = disY = 0; 
  26.     oBtn.onclick = function () 
  27.     { 
  28.         oLay.style.display = "block"; 
  29.         oWin.style.display = "block"     
  30.     }; 
  31.     oClose.onclick = function () 
  32.     { 
  33.         oLay.style.display = "none"; 
  34.         oWin.style.display = "none" 
  35.          
  36.     }; 
  37.     oClose.onmousedown = function (event) 
  38.     { 
  39.         (event || window.event).cancelBubble = true; 
  40.     }; 
  41.     oH2.onmousedown = function (event) 
  42.     {        
  43.         var eventevent = event || window.event; 
  44.         bDrag = true; 
  45.         disX = event.clientX - oWin.offsetLeft; 
  46.         disY = event.clientY - oWin.offsetTop;       
  47.         this.setCapture && this.setCapture();        
  48.         return false 
  49.     }; 
  50.     document.onmousemove = function (event) 
  51.     { 
  52.         if (!bDrag) return; 
  53.         var eventevent = event || window.event; 
  54.         var iL = event.clientX - disX; 
  55.         var iT = event.clientY - disY; 
  56.         var maxL = document.documentElement.clientWidth - oWin.offsetWidth; 
  57.         var maxT = document.documentElement.clientHeight - oWin.offsetHeight;        
  58.         iLiL = iL < 0 ? 0 : iL; 
  59.         iLiL = iL > maxL ? maxL : iL;          
  60.         iTiT = iT < 0 ? 0 : iT; 
  61.         iTiT = iT > maxT ? maxT : iT; 
  62.          
  63.         oWinoWin.style.marginTop = oWin.style.marginLeft = 0; 
  64.         oWin.style.left = iL + "px"; 
  65.         oWin.style.top = iT + "px";      
  66.         return false 
  67.     }; 
  68.     document.onmouseup = window.onblur = oH2.onlosecapture = function () 
  69.     { 
  70.         bDrag = false;               
  71.         oH2.releaseCapture && oH2.releaseCapture(); 
  72.     }; 
  73. }; 
  74. </script> 
  75. </head> 
  76. <body> 
  77. <div id="overlay"></div> 
  78. <div id="win"><h2><span id="close">×</span></h2></div> 
  79. <center><button>弹出层</button></center> 
  80. </body> 
  81. </html> 
 
  
 
 
  
 
  
3、可关闭、可拖动、可拉伸
 
  
 注：当中有三个图片，可打包下载
 
  
 
  
 
 
  
 
  
  1. <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 
  5. <title>可拖拽变大小的弹出层</title> 
  6. <style> 
  7. <!-- 
  8. * { padding: 0; margin: 0; } 
  9. li { list-style: none; } 
  10. body { background: #eee; } 
  11.  
  12. .drag_layer { width: 450px; height: 270px; border: 1px solid #aaaaaa; padding: 3px; position: absolute; top: 0px; left: 0px; background: #fff; overflow:hidden; } 
  13. .drag_layer h2 { height: 25px; line-height: 25px; padding-left: 10px; font-size: 14px; color: #333; background: url(p_w_picpaths/title_bg.gif) repeat-x; border: 1px solid #aaaaaa; cursor: move; position: relative; } 
  14. .drag_layer .close { width: 21px; height: 20px; background: url(p_w_picpaths/close.gif) no-repeat 0 bottom; position: absolute; top: 2px; right: 3px; } 
  15. .drag_layer .close:hover { background: url(p_w_picpaths/close.gif) no-repeat 0 0; } 
  16. .drag_layer .content { padding: 10px; overflow:auto; } 
  17. .drag_layer .content p { font-size: 12px; line-height: 18px; color: #666; text-indent: 28px; padding-bottom: 10px; font-family: arial; } 
  18.  
  19. .drag { width: 14px; height: 14px; overflow: hidden; background: url(p_w_picpaths/drag_ico.gif) no-repeat 1px 1px; cursor: nw-resize; position: absolute; top: 262px; right: 0; z-index: 2; } 
  20. .bar_t { width: 410px; height: 4px; position: absolute; top: -2px; left: -2px; z-index: 1; cursor: n-resize; overflow: hidden; } 
  21. .bar_b { width: 410px; height: 4px; position: absolute; bottom: -2px; left: -2px; z-index: 1; cursor: n-resize; overflow: hidden; } 
  22. .bar_r { width: 4px; height: 110px; position: absolute; right: -2px; top: -2px; z-index: 1; cursor: e-resize; } 
  23. .bar_l { width: 4px; height: 110px; position: absolute; left: -2px; top: -2px; z-index: 1; cursor: e-resize; } 
  24. --> 
  25. </style> 
  26. <script> 
  27. <!-- 
  28. var oMsgbox=null; 
  29. var g_orgTop=0; 
  30. var g_orgHeight=0; 
  31. var g_orgLeft=0; 
  32. var g_orgWidth=0; 
  33.  
  34. var oContent=null; 
  35. var oDragBoth=null; 
  36. var oDragL=null; 
  37. var oDragT=null; 
  38. var oDragR=null; 
  39. var oDragB=null; 
  40.  
  41. window.onload=function (){ 
  42.     var oBtnClose=null; 
  43.     var oH2Title=null; 
  44.     var aDiv=null; 
  45.     var fnDrag=null; 
  46.     var i=0; 
  47.      
  48.     oMsgbox=document.getElementById('msgbox'); 
  49.      
  50.     oBtnClose=oMsgbox.getElementsByTagName('a')[0]; 
  51.     oH2Title=oMsgbox.getElementsByTagName('h2')[0]; 
  52.      
  53.     aDiv=oMsgbox.getElementsByTagName('div'); 
  54.      
  55.     oBtnClose.onmousedown=function (){ 
  56.         oMsgbox.style.display='none'; 
  57.     }; 
  58.      
  59.     oMsgbox.style.left=(document.body.scrollLeft||document.documentElement.scrollLeft)+(document.documentElement.clientWidth-oMsgbox.offsetWidth)/2+'px'; 
  60.     oMsgbox.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+(document.documentElement.clientHeight-oMsgbox.offsetHeight)/2+'px'; 
  61.      
  62.     new PerfectDraging 
  63.     ( 
  64.         oH2Title, 
  65.         function (){ 
  66.             return {x:oMsgbox.offsetLeft, y:oMsgbox.offsetTop}; 
  67.         }, 
  68.         function (x, y) 
  69.         { 
  70.             var iSTop=document.body.scrollTop || document.documentElement.scrollTop; 
  71.              
  72.             if(x<0){ 
  73.                 x=0; 
  74.             } 
  75.             else if(x+oMsgbox.offsetWidth>document.documentElement.clientWidth){ 
  76.                 x=document.body.clientWidth-oMsgbox.offsetWidth; 
  77.             } 
  78.              
  79.             if(y<iSTop){ 
  80.                 y=iSTop; 
  81.             } 
  82.             else if(y+oMsgbox.offsetHeight>document.documentElement.clientHeight+iSTop){ 
  83.                 y=document.documentElement.clientHeight-oMsgbox.offsetHeight+iSTop; 
  84.             } 
  85.             oMsgbox.style.left=x+'px'; 
  86.             oMsgbox.style.top=y+'px'; 
  87.         } 
  88.     ); 
  89.     /* Download by http://www.codefans.net */ 
  90.     for(i=0;i<aDiv.length;i++){ 
  91.         fnDrag=null; 
  92.         switch(aDiv[i].className){ 
  93.             case 'drag': 
  94.                 fnDrag=doBothDrag; 
  95.                 oDragBoth=aDiv[i]; 
  96.                 break; 
  97.             case 'bar_t': 
  98.                 fnDrag=doTDrag; 
  99.                 oDragT=aDiv[i]; 
  100.                 break; 
  101.             case 'bar_r': 
  102.                 fnDrag=doRDrag; 
  103.                 oDragR=aDiv[i]; 
  104.                 break; 
  105.             case 'bar_b': 
  106.                 fnDrag=doBDrag; 
  107.                 oDragB=aDiv[i]; 
  108.                 break; 
  109.             case 'bar_l': 
  110.                 fnDrag=doLDrag; 
  111.                 oDragL=aDiv[i]; 
  112.                 break; 
  113.             case 'content': 
  114.                 oContent=aDiv[i]; 
  115.                 break; 
  116.         } 
  117.          
  118.         if(!fnDrag){ 
  119.             continue; 
  120.         } 
  121.          
  122.         new PerfectDraging 
  123.         ( 
  124.             aDiv[i], 
  125.             function () 
  126.             { 
  127.                 g_orgTop=oMsgbox.offsetTop; 
  128.                 g_orgHeight=oMsgbox.offsetHeight; 
  129.                 g_orgLeft=oMsgbox.offsetLeft; 
  130.                 g_orgWidth=oMsgbox.offsetWidth; 
  131.                 return {x:oMsgbox.offsetWidth, y:oMsgbox.offsetHeight}; 
  132.             }, 
  133.             fnDrag 
  134.             /*function (x, y) 
  135.             { 
  136.                 fnDrag(x, y); 
  137.             }*/ 
  138.         ); 
  139.     } 
  140. }; 
  141.  
  142. function doBothDrag(x, y){ 
  143.     if(x<110){ 
  144.         x=110; 
  145.     } 
  146.      
  147.     oMsgbox.style.width=x-8+'px'; 
  148.     oDragT.style.width=x+'px'; 
  149.     oDragB.style.width=x+'px'; 
  150.      
  151.     if(y<35){ 
  152.         y=35; 
  153.     } 
  154.      
  155.     oMsgbox.style.height=y-8+'px'; 
  156.     oDragL.style.height=y+'px'; 
  157.     oDragR.style.height=y+'px'; 
  158.     oDragBoth.style.top=y-16+'px'; 
  159. } 
  160.  
  161. function doTDrag(x, y){ 
  162.     var h=2*g_orgHeight-y; 
  163.     if(h<35){ 
  164.         h=35; 
  165.     } 
  166.      
  167.     oMsgbox.style.top=g_orgTop+g_orgHeight-h+'px'; 
  168.     oMsgbox.style.height=h-8+'px'; 
  169.      
  170.     oDragL.style.height=h+2+'px'; 
  171.     oDragR.style.height=h+2+'px'; 
  172.      
  173.     oDragBoth.style.top=h-16+'px'; 
  174. } 
  175.  
  176. function doRDrag(x, y){ 
  177.     if(x<110){ 
  178.         x=110; 
  179.     } 
  180.     oMsgbox.style.width=x-8+'px'; 
  181.      
  182.     oDragT.style.width=x+2+'px'; 
  183.     oDragB.style.width=x+2+'px'; 
  184. } 
  185.  
  186. function doBDrag(x, y){  
  187.     if(y<35){ 
  188.         y=35; 
  189.     } 
  190.     oMsgbox.style.height=y-8+'px'; 
  191.      
  192.     oDragL.style.height=y+2+'px'; 
  193.     oDragR.style.height=y+2+'px'; 
  194.      
  195.     oDragBoth.style.top=y-16+'px'; 
  196. } 
  197.  
  198. function doLDrag(x, y){ 
  199.     var w=2*g_orgWidth-x; 
  200.     if(w<110){ 
  201.         w=110; 
  202.     } 
  203.     oMsgbox.style.left=g_orgLeft+g_orgWidth-w+'px'; 
  204.     oMsgbox.style.width=w-8+'px'; 
  205.      
  206.     oDragT.style.width=w+2+'px'; 
  207.     oDragB.style.width=w+2+'px'; 
  208. } 
  209.  
  210. function PerfectDraging(oElement, fnGetPos, fnOnDrag){ 
  211.     var obj=this; 
  212.      
  213.     this.oElement=oElement; 
  214.     this.fnGetPos=fnGetPos; 
  215.     this.fnOnDrag=fnOnDrag; 
  216.     this.__oStartOffset__={x:0, y:0}; 
  217.      
  218.     this.fnOnMouseUp=function (ev){ 
  219.         obj.stopDrag(window.event || ev); 
  220.     }; 
  221.      
  222.     this.fnOnMouseMove=function (ev){ 
  223.         obj.doDrag(window.event || ev); 
  224.     }; 
  225.      
  226.     this.oElement.onmousedown=function (ev){ 
  227.         obj.startDrag(window.event || ev); 
  228.     }; 
  229. } 
  230.  
  231. PerfectDraging.prototype.startDrag=function (oEvent){ 
  232.     var oPos=this.fnGetPos(); 
  233.     //var x=oEvent.pageX || oEvent.x; 
  234.     //var y=oEvent.pageY || oEvent.y; 
  235.     var x=oEvent.clientX; 
  236.     var y=oEvent.clientY; 
  237.      
  238.     this.__oStartOffset__.x=x-oPos.x; 
  239.     this.__oStartOffset__.y=y-oPos.y; 
  240.      
  241.     if(this.oElement.setCapture){ 
  242.         this.oElement.setCapture(); 
  243.          
  244.         thisthis.oElement.onmouseup=this.fnOnMouseUp; 
  245.         thisthis.oElement.onmousemove=this.fnOnMouseMove; 
  246.     } 
  247.     else{ 
  248.         document.addEventListener("mouseup", this.fnOnMouseUp, true); 
  249.         document.addEventListener("mousemove", this.fnOnMouseMove, true); 
  250.          
  251.         window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); 
  252.     } 
  253. }; 
  254.  
  255. PerfectDraging.prototype.stopDrag=function (oEvent){ 
  256.     if(this.oElement.releaseCapture){ 
  257.         this.oElement.releaseCapture(); 
  258.          
  259.         this.oElement.onmouseup=null; 
  260.         this.oElement.onmousemove=null; 
  261.     } 
  262.     else{ 
  263.         document.removeEventListener("mouseup", this.fnOnMouseUp, true); 
  264.         document.removeEventListener("mousemove", this.fnOnMouseMove, true); 
  265.          
  266.         window.releaseEvents(Event.MOUSE_MOVE | Event.MOUSE_UP); 
  267.     } 
  268. }; 
  269.  
  270. PerfectDraging.prototype.doDrag=function (oEvent){ 
  271.     //var x=oEvent.pageX || oEvent.x; 
  272.     //var y=oEvent.pageY || oEvent.y; 
  273.     var x=oEvent.clientX; 
  274.     var y=oEvent.clientY; 
  275.      
  276.     this.fnOnDrag(x-this.__oStartOffset__.x, y-this.__oStartOffset__.y); 
  277. }; 
  278. //--> 
  279. </script> 
  280. </head> 
  281.  
  282. <body style="height:2000px;"> 
  283.  
  284. <div id="msgbox" class="drag_layer"> 
  285.     <h2> 
  286.         标题 
  287.         <a href="#" class="close" title="关闭"></a> 
  288.     </h2> 
  289.     <div class="content"> 
  290.         内容 
  291.     </div> 
  292.  
  293.     <div class="drag"></div> 
  294.     <div class="bar_t"></div> 
  295.     <div class="bar_r"></div> 
  296.     <div class="bar_b"></div> 
  297.     <div class="bar_l"></div> 
  298. </div> 
  299.  
  300. </body> 
  301. </html> 
 
  
 
 
  
4、可拖动
 
  
此弹出层非常实用，源码分析见：
 
  
http://xuqin.blog.51cto.com/5183168/984397