html模态对话框代码,JavaScript 实现模态对话框 源代码大全

首先，来说一下对话框：

对话框在Windows应用程序中使用非常普遍，许多应用程序的设定，与用户交互需要通过对话框来进行，因此对话框是Windows应用程序中最重要的界面元素之一，是与用户交互的重要手段。对话框是一个特殊的窗口，任何对窗口进行的操作(如移动、最大化、最小化等)也可以在对话框实施。

对话框大致可以分为以下两种：

(1)模态对话框：模态对话框弹出后，独占了系统资源，用户只有在关闭该对话框后才可以继续执行，不能够在关闭对话框之前执行应用程序其他部分的代码。模态对话框一般要求用户做出某种选择。

(2)非模态对话框：非模态对话框弹出后，程序可以在不关闭该对话框的情况下继续执行，在转入到应用程序其他部分的代码时可以不需要用户做出响应。非模态对话框一般用来显示信息，或者实时地进行一些设置。

模态窗口在传统编程语言中很常见，简单的说就是，如果是模态的，就是打开一个子窗口，如果这个子窗口不关闭，就不能操作它的父窗口，原来程序暂停执行，直到这个模态窗口关闭后才回到原来程序继续。

非模态的就是直接显示出来，然后原来的程序继续执行下面的语句，而且其他窗口也呈可用状态。

模态对话框独占了用户的输入，当一个模态对话框打开时，用户只能与该对话框进行交互，而其他用户界面对象收不到输入信息。应用程序用到的大部分对话框都是模态对话框。

通常浏览器中windwo.open或超链接弹出的新窗口就是非模式窗口,而模式窗口是类似alert那种必须关闭才能响应其他事件的窗口。

明白了对话框的模态和非模态，来看下边在B/s结构应用程序的开发中,有时我们会希望使用者按下按钮后开启一个保持在原窗口前方的子窗口,

在IE中,我们可以使用window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框，由于是对话框，因此它并没有一般用window.open()打开的窗口的所有属性。

这里是window.showModalDialog弹出窗口的一个实例函数:

function openWin(src, width, height, showScroll){

window.showModalDialog

(src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeig

ht:"+height+";scroll:"+showScroll+";");

}

// -->

例：

点击

需要注意的是FireFox浏览器中不支持showmodaldialog() ，这是因为在最初MozillaSuite 中(Firefox 是从这个套件衍生)，是支持 showmodaldialog()的，不过后来发现 showmodaldialog() 存在安全隐患，不久后就取消了对showmodaldialog() 的支持，这个事情还发生在 bug 194404 提交前。在想出更好的解决方案前，相信 Firefox 是不会提供对 showmodaldialog() 的支持的。

打开弹窗只能使用window.open实现这样的功能，window.open的语法如下 :

oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

只是,在Firefox下,window.open的参数中,sFeature多了一些功能设定,要让FireFox下开启的窗口跟IE的showModalDialog一样的话, 只要在sFeatures中加个modal=yes就可以了,也许可能是出于安全考虑modal=yes，打开的并不是模式窗口，范例如下:

oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

由于在firefox没有showModalDialog方法。则用如下判断来兼容两种浏览器：

二、JavaScript+div实现模态对话框：

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

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

`````

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%";

}

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[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[i].style.visibility = "visible";

}

function Demo(string)

{

ScreenConvert();

var ShowDiv="

"+string+"

";

DialogShow(ShowDiv,250,120,300,100);

}

// -->

body{margin:0}

-->

1222

value="">2

11 22

三、Javascript模态对话框 取父页的值

1. a.htm 父页

有 window.showModalDialog("b.htm");

有 Html元素

2.b.htm 弹出页面

能否在 b.htm 上取到 a.htm 中 t1值 ?

回答:

在a.html中设置

var results = window.showModalDialog("b.html");

(results){alert(results["key"]);}

在b.html中

window.Value={key:"返回到父页面"}

四、模态对话框模仿MessageBox

模态对话框

" + "

" + "

" + "

"; this.dlgCaptionId = document.getElementById(this.dlgIdStr + "_caption"); this.dlgInfoId = document.getElementById(this.dlgIdStr + "_info"); this.dlgButtonsId = document.getElementById(this.dlgIdStr + "_buttons"); this.IniDlg(caption, info, buttons, objNameStr); this.ShowDlg(true); } //初始化对话框 function IniDlg(caption, info, buttons, objNameStr) { this.dlgCaptionId.innerText = caption; this.dlgInfoId.innerHTML = info; this.dlgButtonsId.innerHTML = ""; if (parseInt(buttons/8) == 1) { this.dlgButtonsId.innerHTML = " " + this.dlgButtonsId.innerHTML;//前后空格，避免各个按钮之间离得太近 buttons -= 8; } if (parseInt(buttons/4) == 1) { this.dlgButtonsId.innerHTML = " " + this.dlgButtonsId.innerHTML; buttons -= 4; } if (parseInt(buttons/2) == 1) { this.dlgButtonsId.innerHTML = " " + this.dlgButtonsId.innerHTML; buttons -= 2; } if (buttons == 1) { this.dlgButtonsId.innerHTML = " " + this.dlgButtonsId.innerHTML; } } //显示、隐藏对话框，并确定是点击哪个按钮关闭对话框的 //display为true－显示 //display为false－隐藏 function ShowDlg(display, returnValue) { if (display) { ReSizeDlg(); this.coverId.style.display = "block"; } else { this.coverId.style.display = "none"; } this.returnValue = returnValue; } /*================================================================================*/ /*================================================================================*/ //对话框返回函数 //自行修改函数代码 function OnDlgReturn(objNameStr, returnValue) { alert("CMessageBox 对象 " + objNameStr + " 的返回值是" + returnValue); } //保持cover框覆盖整个客户区 //保持对话框在预期位置 //如果覆盖框id不为cover，则需要手动修改此函数。 //document.body.onscroll和document.body.onresize触发本函数 //同时此函数也被CMessageBox调用 function ReSizeDlg() { var cover = document.getElementById("cover"); cover.style.pixelTop = document.body.scrollTop; cover.style.pixelLeft = document.body.scrollLeft; cover.style.width = document.body.clientWidth; cover.style.height = document.body.clientHeight; } document.body.onscroll = ReSizeDlg; document.body.onresize = ReSizeDlg; /*================================================================================*/ /*================================================================================*/ var objDlg = new CMessageBox("cover", "dlg"); var objDlg2 = new CMessageBox("cover", "dlg");

// -->

五、showModalDialog 打开的模态对话框有不少经典的缺陷，解决办法

showModalDialog 打开的模态对话框有不少经典的缺陷，在这里不再冗述，我只谈谈最近碰到的几个问题以及解决办法。

问题1. showModalDialog 打开一个 aspx 页面时，如果该页面在之前已经打开过一次，则自动会加载缓存中的页面，而不能显示最新数据。

解决的办法有两种：

(1). 在打开模态框时，给 url 后面多加一个随机参数，来避免页面被缓存：

var url = 'EditFlowNode.aspx?flowId=0&id=2&x=' + Math.random();

var result = window.showModalDialog(url, '', 'status:no; help:no;');

(2). 在该 asp.net 页面的 Page_Load 方法里设定不缓存：

protectedvoidPage_Load(objectsender, EventArgs e){

Response.Expires=0;

Response.Cache.SetNoStore();

Response.AppendHeader("Pragma","no-cache");

}

问题2. 模态对话框中的内容和脚本加载次序不同，导致的问题。

缘起：考虑如下页面的代码

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">new document