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. </script>   
  97. <style type="text/css"> 
  98. <!-- 
  99. #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;} 
  100. --> 
  101. </style>   
  102. </head>   
  103.   
  104. <body> 
  105.  
  106. <p onClick="BOX_show('messdiv')" style="cursor:pointer;">点击弹出层</p> 
  107.  
  108. <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;">   
  109.     <p style="text-align:right; margin:0; padding:0; line-height:14px; float:right;"> 
  110.         <a href="javascript:void(0)" title="关闭" style="line-height:14px;font-size:12px; color:#333;" onclick="BOX_remove('messdiv')" target="_self">关闭</a> 
  111.     </p>   
  112.     <br /><br /><br /><br /> 
  113.     这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容 
  114.     <br /><br /><br /><br /> 
  115.     <br /><br /><br /><br />   
  116.     <div style="width:176px;padding:0 120px;overflow:hidden;margin:10px auto 20px;">   
  117.         <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>   
  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;">取消</a>   
  119.     </div>   
  120.     <div style="clear:both;"></div>   
  121. </div>   
  122. <div id="BOX_overlay"></div> 
  123.  
  124. </body>   
  125. </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.     var oWin = document.getElementById("win"); 
  19.     var oLay = document.getElementById("overlay");   
  20.     var oBtn = document.getElementsByTagName("button")[0]; 
  21.     var oClose = document.getElementById("close"); 
  22.     var oH2 = oWin.getElementsByTagName("h2")[0]; 
  23.     var bDrag = false
  24.     var disX = disY = 0; 
  25.     oBtn.onclick = function () 
  26.     { 
  27.         oLay.style.display = "block"
  28.         oWin.style.display = "block"     
  29.     }; 
  30.     oClose.onclick = function () 
  31.     { 
  32.         oLay.style.display = "none"
  33.         oWin.style.display = "none" 
  34.          
  35.     }; 
  36.     oClose.onmousedown = function (event) 
  37.     { 
  38.         (event || window.event).cancelBubble = true
  39.     }; 
  40.     oH2.onmousedown = function (event) 
  41.     {        
  42.         var eventevent = event || window.event; 
  43.         bDrag = true
  44.         disX = event.clientX - oWin.offsetLeft; 
  45.         disY = event.clientY - oWin.offsetTop;       
  46.         this.setCapture && this.setCapture();        
  47.         return false 
  48.     }; 
  49.     document.onmousemove = function (event) 
  50.     { 
  51.         if (!bDrag) return; 
  52.         var eventevent = event || window.event; 
  53.         var iL = event.clientX - disX; 
  54.         var iT = event.clientY - disY; 
  55.         var maxL = document.documentElement.clientWidth - oWin.offsetWidth; 
  56.         var maxT = document.documentElement.clientHeight - oWin.offsetHeight;        
  57.         iLiL = iL < 0 ? 0 : iL; 
  58.         iLiL = iL > maxL ? maxL : iL;          
  59.         iTiT = iT < 0 ? 0 : iT; 
  60.         iTiT = iT > maxT ? maxT : iT; 
  61.          
  62.         oWinoWin.style.marginTop = oWin.style.marginLeft = 0
  63.         oWin.style.left = iL + "px"; 
  64.         oWin.style.top = iT + "px";      
  65.         return false 
  66.     }; 
  67.     document.onmouseup = window.onblur = oH2.onlosecapture = function () 
  68.     { 
  69.         bDrag = false;               
  70.         oH2.releaseCapture && oH2.releaseCapture(); 
  71.     }; 
  72. }; 
  73. </script> 
  74. </head> 
  75. <body> 
  76. <div id="overlay"></div> 
  77. <div id="win"><h2><span id="close">×</span></h2></div> 
  78. <center><button>弹出层</button></center> 
  79. </body> 
  80. </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(images/title_bg.gif) repeat-x; border: 1px solid #aaaaaa; cursor: move; position: relative; } 
  14. .drag_layer .close { width: 21px; height: 20px; background: url(images/close.gif) no-repeat 0 bottom; position: absolute; top: 2px; right: 3px; } 
  15. .drag_layer .close:hover { background: url(images/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(images/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. function doTDrag(x, y){ 
  161.     var h=2*g_orgHeight-y; 
  162.     if(h<35){ 
  163.         h=35
  164.     } 
  165.      
  166.     oMsgbox.style.top=g_orgTop+g_orgHeight-h+'px'; 
  167.     oMsgbox.style.height=h-8+'px'; 
  168.      
  169.     oDragL.style.height=h+2+'px'; 
  170.     oDragR.style.height=h+2+'px'; 
  171.      
  172.     oDragBoth.style.top=h-16+'px'; 
  173.  
  174. function doRDrag(x, y){ 
  175.     if(x<110){ 
  176.         x=110
  177.     } 
  178.     oMsgbox.style.width=x-8+'px'; 
  179.      
  180.     oDragT.style.width=x+2+'px'; 
  181.     oDragB.style.width=x+2+'px'; 
  182.  
  183. function doBDrag(x, y){  
  184.     if(y<35){ 
  185.         y=35
  186.     } 
  187.     oMsgbox.style.height=y-8+'px'; 
  188.      
  189.     oDragL.style.height=y+2+'px'; 
  190.     oDragR.style.height=y+2+'px'; 
  191.      
  192.     oDragBoth.style.top=y-16+'px'; 
  193.  
  194. function doLDrag(x, y){ 
  195.     var w=2*g_orgWidth-x; 
  196.     if(w<110){ 
  197.         w=110
  198.     } 
  199.     oMsgbox.style.left=g_orgLeft+g_orgWidth-w+'px'; 
  200.     oMsgbox.style.width=w-8+'px'; 
  201.      
  202.     oDragT.style.width=w+2+'px'; 
  203.     oDragB.style.width=w+2+'px'; 
  204.  
  205. function PerfectDraging(oElement, fnGetPos, fnOnDrag){ 
  206.     var obj=this
  207.      
  208.     this.oElement=oElement; 
  209.     this.fnGetPos=fnGetPos; 
  210.     this.fnOnDrag=fnOnDrag; 
  211.     this.__oStartOffset__={x:0, y:0}; 
  212.      
  213.     this.fnOnMouseUp=function (ev){ 
  214.         obj.stopDrag(window.event || ev); 
  215.     }; 
  216.      
  217.     this.fnOnMouseMove=function (ev){ 
  218.         obj.doDrag(window.event || ev); 
  219.     }; 
  220.      
  221.     this.oElement.onmousedown=function (ev){ 
  222.         obj.startDrag(window.event || ev); 
  223.     }; 
  224.  
  225. PerfectDraging.prototype.startDrag=function (oEvent){ 
  226.     var oPos=this.fnGetPos(); 
  227.     //var x=oEvent.pageX || oEvent.x; 
  228.     //var y=oEvent.pageY || oEvent.y; 
  229.     var x=oEvent.clientX; 
  230.     var y=oEvent.clientY; 
  231.      
  232.     this.__oStartOffset__.x=x-oPos.x; 
  233.     this.__oStartOffset__.y=y-oPos.y; 
  234.      
  235.     if(this.oElement.setCapture){ 
  236.         this.oElement.setCapture(); 
  237.          
  238.         thisthis.oElement.onmouseup=this.fnOnMouseUp; 
  239.         thisthis.oElement.onmousemove=this.fnOnMouseMove; 
  240.     } 
  241.     else{ 
  242.         document.addEventListener("mouseup", this.fnOnMouseUp, true); 
  243.         document.addEventListener("mousemove", this.fnOnMouseMove, true); 
  244.          
  245.         window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); 
  246.     } 
  247. }; 
  248.  
  249. PerfectDraging.prototype.stopDrag=function (oEvent){ 
  250.     if(this.oElement.releaseCapture){ 
  251.         this.oElement.releaseCapture(); 
  252.          
  253.         this.oElement.onmouseup=null
  254.         this.oElement.onmousemove=null
  255.     } 
  256.     else{ 
  257.         document.removeEventListener("mouseup", this.fnOnMouseUp, true); 
  258.         document.removeEventListener("mousemove", this.fnOnMouseMove, true); 
  259.          
  260.         window.releaseEvents(Event.MOUSE_MOVE | Event.MOUSE_UP); 
  261.     } 
  262. }; 
  263.  
  264. PerfectDraging.prototype.doDrag=function (oEvent){ 
  265.     //var x=oEvent.pageX || oEvent.x; 
  266.     //var y=oEvent.pageY || oEvent.y; 
  267.     var x=oEvent.clientX; 
  268.     var y=oEvent.clientY; 
  269.      
  270.     this.fnOnDrag(x-this.__oStartOffset__.x, y-this.__oStartOffset__.y); 
  271. }; 
  272. //--> 
  273. </script> 
  274. </head> 
  275.  
  276. <body style="height:2000px;"> 
  277.  
  278. <div id="msgbox" class="drag_layer"> 
  279.     <h2> 
  280.         标题 
  281.         <a href="#" class="close" title="关闭"></a> 
  282.     </h2> 
  283.     <div class="content"> 
  284.         内容 
  285.     </div> 
  286.  
  287.     <div class="drag"></div> 
  288.     <div class="bar_t"></div> 
  289.     <div class="bar_r"></div> 
  290.     <div class="bar_b"></div> 
  291.     <div class="bar_l"></div> 
  292. </div> 
  293.  
  294. </body> 
  295. </html> 

 

4、可拖动

此弹出层非常实用,源码分析见:

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