[ZT]JavaScript+div实现模态对话框[修正版]

JavaScript+div实现模态对话框。主要是2个层来完成这个效果，第一就是用来锁住下面整个页面的层，要有透明的效果，可以用filter:alpha(opacity=50)。还有一个层是用来显示对话框内容的，所以zIndex参数一定要设置的比锁频层高。

对话框的CSS可以自己定义一下，要注意的是，CSS中body一定要定义margin:0，否则锁频时，会出现空隙，而产生锁频不完整的问题，还有一个就是Select这个控件的问题，因为在IE里，他的zIndex很高，所以锁频层盖不住他，这里可以用两种办法，一种是把他隐藏掉，一种可以把他的disabled属性设置为false，第二种方法只能禁止编辑它，但是还是会在锁频层上当，效果不佳，还是隐藏掉比较好。

JavaScript代码
  1. var t_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH;   
  2. function StrCode(str){   
  3.   if(encodeURIComponent)    
  4.     return encodeURIComponent(str);   
  5.   if(escape)    
  6.     return escape(str);   
  7. }   
  8.   
  9. function Browser(){   
  10.   var ua, s, i;   
  11.   this.isIE = false;   
  12.   this.isNS = false;   
  13.   this.isOP = false;   
  14.   this.isSF = false;   
  15.   ua = navigator.userAgent.toLowerCase();   
  16.   s = "opera";   
  17.   if ((i = ua.indexOf(s)) >= 0){   
  18.     this.isOP = true;return;   
  19.   }   
  20.   s = "msie";   
  21.   if ((i = ua.indexOf(s)) >= 0) {   
  22.     this.isIE = true;   
  23.     return;   
  24.   }   
  25.   s = "netscape6/";   
  26.   if ((i = ua.indexOf(s)) >= 0) {   
  27.     this.isNS = true;   
  28.     return;   
  29.   }   
  30.   s = "gecko";   
  31.   if ((i = ua.indexOf(s)) >= 0) {   
  32.     this.isNS = true;   
  33.     return;   
  34.   }   
  35.   s = "safari";   
  36.   if ((i = ua.indexOf(s)) >= 0) {   
  37.     this.isSF = true;   
  38.     return;   
  39.   }   
  40. }   
  41.   
  42. function DialogShow(showdata,ow,oh,w,h){   
  43.   var objDialog = document.getElementById("DialogMove");   
  44.   if (!objDialog)    
  45.     objDialog = document.createElement("div");   
  46.   t_DiglogW = ow;   
  47.   t_DiglogH = oh;   
  48.   DialogLoc();   
  49.   objDialog.id = "DialogMove";   
  50.   var oS = objDialog.style;   
  51.   oS.display = "block";   
  52.   oS.top = t_DiglogY + "px";   
  53.   oS.left = t_DiglogX + "px";   
  54.   oS.margin = "0px";   
  55.   oS.padding = "0px";   
  56.   oS.width = w + "px";   
  57.   oS.height = h + "px";   
  58.   oS.position = "absolute";   
  59.   oS.zIndex = "5";   
  60.   oS.background = "#FFF";   
  61.   oS.border = "solid #000 1px";   
  62.   objDialog.innerHTML = showdata;   
  63.   document.body.appendChild(objDialog);   
  64. }   
  65.   
  66. function DialogHide(){   
  67.   ScreenClean();   
  68.   var objDialog = document.getElementById("DialogMove");   
  69.   if (objDialog)   
  70.     objDialog.style.display = "none";   
  71. }   
  72.   
  73. function DialogLoc(){   
  74.   var dde = document.documentElement;   
  75.   if (window.innerWidth){   
  76.     var ww = window.innerWidth;   
  77.     var wh = window.innerHeight;   
  78.     var bgX = window.pageXOffset;   
  79.     var bgY = window.pageYOffset;   
  80.   }else{   
  81.     var ww = dde.offsetWidth;   
  82.     var wh = dde.offsetHeight;   
  83.     var bgX = dde.scrollLeft;   
  84.     var bgY = dde.scrollTop;   
  85.   }   
  86.   t_DiglogX = (bgX + ((ww - t_DiglogW)/2));   
  87.   t_DiglogY = (bgY + ((wh - t_DiglogH)/2));   
  88. }   
  89.   
  90. function ScreenConvert(){   
  91.   var browser = new Browser();   
  92.   var objScreen = document.getElementById("ScreenOver");   
  93.   if(!objScreen)    
  94.     var objScreen = document.createElement("div");   
  95.   var oS = objScreen.style;   
  96.   objScreen.id = "ScreenOver";   
  97.   oS.display = "block";   
  98.   oS.top = oS.left = oS.margin = oS.padding = "0px";   
  99.   if (document.body.clientHeight)   {   
  100.     var wh = document.body.clientHeight + "px";   
  101.   }else if (window.innerHeight){   
  102.     var wh = window.innerHeight + "px";   
  103.   }else{   
  104.     var wh = "100%";   
  105.   }   
  106. if (document.body.scrollHeight)
         {
             var wh = document.body.scrollHeight + "px";
         }
  107.   oS.width = "100%";   
  108.   oS.height = wh;   
  109.   oS.position = "absolute";   
  110.   oS.zIndex = "3";   
  111.   if ((!browser.isSF) && (!browser.isOP)){   
  112.     oS.background = "#cccccc";   
  113.   }else{   
  114.     oS.background = "#cccccc";   
  115.   }   
  116.   oS.filter = "alpha(opacity=50)";   
  117.   oS.opacity = 40/100;   
  118.   oS.MozOpacity = 40/100;   
  119.   document.body.appendChild(objScreen);   
  120.   var allselect = document.getElementsByTagName("select");   
  121.   for (var i=0; i<allselect.length; i++)    
  122.     allselect[i].style.visibility = "hidden";   
  123. }   
  124.   
  125. function ScreenClean(){   
  126.   var objScreen = document.getElementById("ScreenOver");   
  127.   if (objScreen)   
  128.     objScreen.style.display = "none";   
  129.   var allselect = document.getElementsByTagName("select");   
  130.   for (var i=0; i<allselect.length; i++)    
  131.     allselect[i].style.visibility = "visible";   
  132. }   
  133.   
  134. function Demo(string){   
  135.   ScreenConvert();   
  136.   var ShowDiv="<div style=\"padding:10px;\">"+string+" <br /><br /><input type=\"button\" onclick=\"DialogHide();\" value=\" 关闭 \"></div>";   
  137.   DialogShow(ShowDiv,250,120,300,100);   
  138. }  

 

CSS代码
  1. body{margin:0}  
XML/HTML代码
  1. <div style="border:1px solid;width:100%">  
  2. <div>  
  3. <input type="button" value="显示对话框" onclick="javascript:Demo('o(∩_∩)o...哈哈!');">    
  4. <select name=""><option value="" selected>1</option><option value="">2</option><option value="">2</option><option value="">2</option><option value="">2</option></select>  
  5. <input type="text" name="" value="aaa">  
  6. <input type="radio" name="">11 <input type="checkbox" name="">22 <input type="password" name="" value="aaa">  
  7. </div>  

HTML代码
  [Ctrl+A 全选 提示：你可先修改部分代码，再按运行]

posted on 2008-10-07 10:37  巍巍边疆  阅读(1811)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 巍巍边疆
Powered by .NET 9.0 on Kubernetes