js实现模态对话框
这篇文章提供给大家分享学习的是关于js实现模态对话框经验分享，希望能够帮助到大家。
首先，来说一下对话框
对话框在Windows应用程序中使用非常普遍，许多应用程序的设定，与用户交互需
要通过对话框来进行，因此对话框是Windows应用程序中最重要的界面元素之一，
是与用户交互的重要手段。对话框是一个特殊的窗口，任何对窗口进行的操作（
如移动、最大化、最小化等）也可以在对话框实施。
对话框大致可以分为以下两种。
（1）模态对话框：模态对话框弹出后，独占了系统资源，用户只有在关闭该对话
框后才可以继续执行，不能够在关闭对话框之前执行应用程序其他部分的代码。
模态对话框一般要求用户做出某种选择。
（2）非模态对话框：非模态对话框弹出后，程序可以在不关闭该对话框的情况下
继续执行，在转入到应用程序其他部分的代码时可以不需要用户做出响应。非模
态对话框一般用来显示信息，或者实时地进行一些设置。
模态窗口在传统编程语言中很常见，简单的说就是，如果是模态的，就是打开一
个子窗口，如果这个子窗口不关闭，就不能操作它的父窗口，原来程序暂停执行
，直到这个模态窗口关闭后才回到原来程序继续。
非模态的就是直接显示出来，然后原来的程序继续执行下面的语句，而且其他窗
口也呈可用状态。
模态对话框独占了用户的输入，当一个模态对话框打开时，用户只能与该对话框
进行交互，而其他用户界面对象收不到输入信息。应用程序用到的大部分对话框
都是模态对话框。
通常浏览器中windwo.open或超链接弹出的新窗口就是非模式窗口,而模式窗口是
类似alert那种必须关闭才能响应其他事件的窗口。
明白了对话框的模态和非模态，来看下边
在B/s结构应用程序的开发中,有时我们会希望使用者按下按钮后开启一个保持在
原窗口前方的子窗口,
在IE中,我们可以使用
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框，由于
是对话框，因此它并没有一般用window.open()打开的窗口的所有属性。
这里是window.showModalDialog弹出窗口的一个实例函数:
| <script type="text/javascript"> function openWin(src, width, height, showScroll){ window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeig ht:"+height+";scroll:"+showScroll+";"); } </script> 例：<span style="CURSOR: pointer" onclick="openWin (’http://www.deepteach.com’, ’500px’, ’400px’, ’no’)">点击</span> |
需要注意的是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
打开的并不是模式窗口
范例如下:
| window.open (’openwin.html’,'newWin’, 'modal=yes, width=200,height=200,resizable=no, scrollbars=no’ ); |
由于在firefox没有showModalDialog方法。则用如下判断来兼容两种浏览器：
| <input type="button" value="打开对话框" onclick="showDialog('#')"/> <SCRIPT LANGUAGE="JavaScript"> <!-- function showDialog(url) { if( document.all ) //IE { feature="dialogWidth:300px;dialogHeight:200px;status:no;help:no"; window.showModalDialog(url,null,feature); } else { //modelessDialog可以将modal换成dialog=yes feature ="width=300,height=200,menubar=no,toolbar=no,location=no,"; feature+="scrollbars=no,status=no,modal=yes"; window.open(url,null,feature); } } //--> </SCRIPT> |
