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

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

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

JavaScript代码

var t_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH;
function StrCode(str){
  if(encodeURIComponent)
    return encodeURIComponent(str);
  if(escape)
    return escape(str);
}

function Browser(){
  var ua, s, i;
  this.isIE = false;
  this.isNS = false;
  this.isOP = false;
  this.isSF = false;
  ua = navigator.userAgent.toLowerCase();
  s = "opera";
  if ((i = ua.indexOf(s)) >= 0){
    this.isOP = true;return;
  }
  s = "msie";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    return;
  }
  s = "netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    return;
  }
  s = "gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    return;
  }
  s = "safari";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isSF = true;
    return;
  }
}

function DialogShow(showdata,ow,oh,w,h){
  var objDialog = document.getElementById("DialogMove");
  if (!objDialog)
    objDialog = document.createElement("div");
  t_DiglogW = ow;
  t_DiglogH = oh;
  DialogLoc();
  objDialog.id = "DialogMove";
  var oS = objDialog.style;
  oS.display = "block";
  oS.top = t_DiglogY + "px";
  oS.left = t_DiglogX + "px";
  oS.margin = "0px";
  oS.padding = "0px";
  oS.width = w + "px";
  oS.height = h + "px";
  oS.position = "absolute";
  oS.zIndex = "5";
  oS.background = "#FFF";
  oS.border = "solid #000 1px";
  objDialog.innerHTML = showdata;
  document.body.appendChild(objDialog);
}

function DialogHide(){
  ScreenClean();
  var objDialog = document.getElementById("DialogMove");
  if (objDialog)
    objDialog.style.display = "none";
}

function DialogLoc(){
  var dde = document.documentElement;
  if (window.innerWidth){
    var ww = window.innerWidth;
    var wh = window.innerHeight;
    var bgX = window.pageXOffset;
    var bgY = window.pageYOffset;
  }else{
    var ww = dde.offsetWidth;
    var wh = dde.offsetHeight;
    var bgX = dde.scrollLeft;
    var bgY = dde.scrollTop;
  }
  t_DiglogX = (bgX + ((ww - t_DiglogW)/2));
  t_DiglogY = (bgY + ((wh - t_DiglogH)/2));
}

function ScreenConvert(){
  var browser = new Browser();
  var objScreen = document.getElementById("ScreenOver");
  if(!objScreen)
    var objScreen = document.createElement("div");
  var oS = objScreen.style;
  objScreen.id = "ScreenOver";
  oS.display = "block";
  oS.top = oS.left = oS.margin = oS.padding = "0px";
  if (document.body.clientHeight)   {
    var wh = document.body.clientHeight + "px";
  }else if (window.innerHeight){
    var wh = window.innerHeight + "px";
  }else{
    var wh = "100%";
  }
if (document.body.scrollHeight)      {          var wh = document.body.scrollHeight + "px";      }
  oS.width = "100%";
  oS.height = wh;
  oS.position = "absolute";
  oS.zIndex = "3";
  if ((!browser.isSF) && (!browser.isOP)){
    oS.background = "#cccccc";
  }else{
    oS.background = "#cccccc";
  }
  oS.filter = "alpha(opacity=50)";
  oS.opacity = 40/100;
  oS.MozOpacity = 40/100;
  document.body.appendChild(objScreen);
  var allselect = document.getElementsByTagName("select");
  for (var i=0; i<allselect.length; i++)
    allselect[i].style.visibility = "hidden";
}

function ScreenClean(){
  var objScreen = document.getElementById("ScreenOver");
  if (objScreen)
    objScreen.style.display = "none";
  var allselect = document.getElementsByTagName("select");
  for (var i=0; i<allselect.length; i++)
    allselect[i].style.visibility = "visible";
}

function Demo(string){
  ScreenConvert();
  var ShowDiv="<div style=\"padding:10px;\">"+string+" <br /><br /><input type=\"button\" οnclick=\"DialogHide();\" value=\" 关闭 \"></div>";
  DialogShow(ShowDiv,250,120,300,100);
}

 

CSS代码

body{margin:0}

XML/HTML代码

<div style="border:1px solid;width:100%">
<div>
<input type="button" value="显示对话框" onclick="javascript:Demo('o(∩_∩)o...哈哈!');">
<select name=""><option value="" selected>1</option><option value="">2</option><option value="">2</option><option value="">2</option><option value="">2</option></select>
<input type="text" name="" value="aaa">
<input type="radio" name="">11 <input type="checkbox" name="">22 <input type="password" name="" value="aaa">
</div>

HTML代码

<html> <title>`````</title> <head> <meta name="keywords" content="51windows.Net"> <meta http-equiv=content-type content="text/html; charset=gb2312"> <script type="text/javascript"> var t_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH; function StrCode(str){ if(encodeURIComponent) return encodeURIComponent(str); if(escape) return escape(str); } function Browser(){ var ua, s, i; this.isIE = false; this.isNS = false; this.isOP = false; this.isSF = false; ua = navigator.userAgent.toLowerCase(); s = "opera"; if ((i = ua.indexOf(s)) >= 0){ this.isOP = true;return; } s = "msie"; if ((i = ua.indexOf(s)) >= 0) { this.isIE = true; return; } s = "netscape6/"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; return; } s = "gecko"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; return; } s = "safari"; if ((i = ua.indexOf(s)) >= 0) { this.isSF = true; return; } } function DialogShow(showdata,ow,oh,w,h){ var objDialog = document.getElementById("DialogMove"); if (!objDialog) objDialog = document.createElement("div"); t_DiglogW = ow; t_DiglogH = oh; DialogLoc(); objDialog.id = "DialogMove"; var oS = objDialog.style; oS.display = "block"; oS.top = t_DiglogY + "px"; oS.left = t_DiglogX + "px"; oS.margin = "0px"; oS.padding = "0px"; oS.width = w + "px"; oS.height = h + "px"; oS.position = "absolute"; oS.zIndex = "5"; oS.background = "#FFF"; oS.border = "solid #000 1px"; objDialog.innerHTML = showdata; document.body.appendChild(objDialog); } function DialogHide(){ ScreenClean(); var objDialog = document.getElementById("DialogMove"); if (objDialog) objDialog.style.display = "none"; } function DialogLoc(){ var dde = document.documentElement; if (window.innerWidth){ var ww = window.innerWidth; var wh = window.innerHeight; var bgX = window.pageXOffset; var bgY = window.pageYOffset; }else{ var ww = dde.offsetWidth; var wh = dde.offsetHeight; var bgX = dde.scrollLeft; var bgY = dde.scrollTop; } t_DiglogX = (bgX + ((ww - t_DiglogW)/2)); t_DiglogY = (bgY + ((wh - t_DiglogH)/2)); } function ScreenConvert(){ var browser = new Browser(); var objScreen = document.getElementById("ScreenOver"); if(!objScreen) var objScreen = document.createElement("div"); var oS = objScreen.style; objScreen.id = "ScreenOver"; oS.display = "block"; oS.top = oS.left = oS.margin = oS.padding = "0px"; if (document.body.clientHeight) { var wh = document.body.clientHeight + "px"; }else if (window.innerHeight){ var wh = window.innerHeight + "px"; }else{ var wh = "100%"; } if (document.body.scrollHeight) { var wh = document.body.scrollHeight + "px"; } oS.width = "100%"; oS.height = wh; oS.position = "absolute"; oS.zIndex = "3"; if ((!browser.isSF) && (!browser.isOP)){ oS.background = "#cccccc"; }else{ oS.background = "#cccccc"; } oS.filter = "alpha(opacity=50)"; oS.opacity = 40/100; oS.MozOpacity = 40/100; document.body.appendChild(objScreen); var allselect = document.getElementsByTagName("select"); for (var i=0; i<allselect.length; i++) allselect[i].style.visibility = "hidden"; } function ScreenClean(){ var objScreen = document.getElementById("ScreenOver"); if (objScreen) objScreen.style.display = "none"; var allselect = document.getElementsByTagName("select"); for (var i=0; i<allselect.length; i++) allselect[i].style.visibility = "visible"; } function Demo(string){ ScreenConvert(); var ShowDiv="<div style=\"padding:10px;\">"+string+" <br /><br /><input type=\"button\" οnclick=\"DialogHide();\" value=\" 关闭 \"></div>"; DialogShow(ShowDiv,250,120,300,100); } </script> <style> body{margin:0} </style> </head> <body> <div style="border:1px solid;width:100%"> <div> <input type="button" value="显示对话框" οnclick="javascript:Demo('o(∩_∩)o...哈哈!');">  <select name=""><option value="" selected>1</option><option value="">2</option><option value="">2</option><option value="">2</option><option value="">2</option></select> <input type="text" name="" value="aaa"> <input type="radio" name="">11 <input type="checkbox" name="">22 <input type="password" name="" value="aaa"> </div> </body> </html>

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