zoukankan      html  css  js  c++  java

  • [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;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 全选 提示：你可先修改部分代码，再按运行]
  • 相关阅读:
    [转载][mysql]mysql字符集干货
    [mysql]修改表段默认值
    微信支付之h5方式(非微信内置浏览器中支付)
    阿里云 ECS 安全组
    Memcached cas 陷阱
    Memcached 分布式集群
    nginx 配置多个主机
    static类型的变量
    全局变量和局部变量
    nginx 负载均衡（默认算法）
  • 原文地址：https://www.cnblogs.com/godwar/p/1305317.html
Copyright © 2011-2022 走看看