JavaScript 实现模态对话框源代码大全_javascript技巧

2020年6月19日 01:33:08js教程评论400 views阅读模式

首先，来说一下对话框：

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

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

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

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

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

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

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

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

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

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

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

复制代码代码如下:

例：

复制代码代码如下:

点击

需要注意的是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，第二种方法只能禁止编辑它，但是还是会在锁频层上当，效果不佳，还是隐藏掉比较好。

复制代码代码如下:

`````

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中

四、模态对话框模仿MessageBox

复制代码代码如下:

模态对话框

五、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 方法里设定不缓存：

protected void Page_Load(object sender, EventArgs e){
Response.Expires = 0;
Response.Cache.SetNoStore();
Response.AppendHeader("Pragma", "no-cache");
}

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

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

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

<head>
<title> new document
title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />

head>

<body>
<input id="txt1">
<script type="text/javascript">

script>

body>

html>

这个页面，如果在普通的 IE 窗口中加载时，提示的信息是 "155"，而在模态对话框中执行时，其数值是 "0"。为什么会这样？

我们注意到普通窗口打开该页面时，当跳出 alert 对话框后，整个页面元素都已经正常显示了；而模态框在打开时，跳出 alert 对话框后，其背景却是一片空白；等点击“确定”后，才会显示出网页内容。
由此可以推测，模态框和普通页面在解析执行 HTML 时的次序不同：

普通页面：依次解析 body 中的元素，并随即绘制(render)解析完的元素。如果碰到 script, 则立刻执行之。

模态对话框：依次解析 body 中的元素，但并未立即绘制(render)它们。如果碰到 script, 则立刻执行之。等 body 都加载完毕后，再依次绘制其中的元素。

由于以上我们示例代码中访问到了 offsetWidth 属性，而我们可以推知，该属性一定是当元素被绘制(render)完毕后，才会自动计算出有意义的数值。所以就导致了问题中看到的现象。

之所以考虑到这个问题，其实是因为我在模态对话框中使用一个第三方控件的时候，出现了 bug，经过调试发现根源的原因在于该控件采用了常用的代码模式来输出其 HTML。也就是在一段 HTML 输出后，紧接着输出其初始化脚本。（这个问题值得 ASP.NET 控件开发者引起注意）

幸运的是，我有这个控件的源代码。因此修改源代码解决了这个问题。我的解法类似于这样：

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

<head>
<title> new document
title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />

head>