showModalDialog与showModallessDialog方法说明

来源：互联网发布：it technician 编辑：程序博客网时间：2024/05/19 00:37

showModalDialog与showModallessDialog方法说明

来源：http://www.cnblogs.com/Dlonghow/archive/2009/06/04/1496141.html
搜集整理：sagahu@163.com

基本介绍

showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog() 方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog() 方法用来创建一个显示HTML内容的非模态对话框。

语法

vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

当我们用showModelessDialog()打开窗口时，不必用window.close()去关闭它。当以非模态方式[IE5+]打开时，打开对话框的窗口仍可以进行其他的操作，即对话框不总是最上面的焦点，当打开它的窗口ＵＲＬ改变时，它自动关闭。而模态[IE4+]方式的对话框始终有焦点（焦点不可移走，直到它关闭）。模态对话框和打开它的窗口相联系，因此我们打开另外的窗口时，他们的链接关系依然保存，并且隐藏在活动窗口的下面。

参数说明

sURL——必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments——可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过 window.dialogArguments来取得传递进来的参数。
sFeatures——可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。

dialogLeft: 离屏幕左的距离。
dialogTop: 离屏幕上的距离。
dialogWidth: 对话框宽度。
dialogHeight: 对话框高度，不小于100px，IE4中 dialogHeight 和 dialogWidth 默认的单位是em，而IE5中是px，为方便其见，在定义modal方式的对话框时，用px做单位。。
resizable: {yes|no|1|0} [IE5+]：是否可被改变大小。默认no。
scroll: {yes|no|1|0|on|off}：是否显示滚动条。默认为yes。
center: {yes|no|1|0} ：是否居中，默认yes，但仍可以指定高度和宽度。
help: {yes|no|1|0}：是否显示帮助按钮，默认yes。
status: {yes|no|1|0} [IE5+]：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。

下面几个属性是用在HTA中的，在一般的网页中一般不使用。

dialogHide: {yes|no|1|0|on|off}：在打印或者打印预览时对话框是否隐藏。默认为no。
edge: {sunken|raised}：指明对话框的边框样式。默认为raised。
unadorned: {yes|no|1|0|on|off}：默认为no。

关于参数传递

1. 要在打开对话框时向对话框传递参数，是通过vArguments来进行传递的。类型不限制。对于字符串类型，最大为4096个字符。也可以传递对象，例如：

parent.htm页面：

<script>    var obj = new Object();    obj.name = "51js";    window.showModalDialog("modal.htm", obj, "dialogWidth=200px;dialogHeight=100px");</script>

modal.htm页面：

<script>    var obj = window.dialogArguments    alert("您传递的参数为：" + obj.name)</script>

2. 在对话框关闭前，可以通过给window.returnValue赋值，来向打开它的那个父窗口返回信息，当然也可以是对象。例如：

parent.htm页面：

<script>    str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");    alert(str);</script>

modal.htm页面：

<script>    window.returnValue = "http://homepage.yesky.com";</script>

常见技巧与问题

一、定义sFeatures模板，便于使用

    var sFeatures="dialogLeft=10px;dialogTop=10px;dialogWidth=400px;dialogHeight=300px;resizable=0;scroll=0;center=1;help=0;status=0";

使用的时候，拷贝其修改即可。

二、怎样才能让showModalDialog和showModelessDialog的超链接不弹出新窗口？

在被打开的网页里加上<base target="_self">就可以了。这句话一般是放在<head>之间的。

三、怎样才能刷新showModalDialog和showModelessDialog弹出的内容？

在showModalDialog和showModelessDialog弹出的内容是不能按F5刷新的，又不能弹出菜单。这个只能依靠javascript了，以下是相关代码：

    <body onkeydown="if(event.keyCode==116){reload.click()}">    <a id="reload" href="filename.htm" style="display:none">reload...</a>

将filename.htm替换成网页的名字然后将它放到你打开的网页里，按F5就可以刷新了。注意，这个要配合<base target="_self">使用，不然你按下F5会弹出新窗口的。

四、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。

    <input type="button" value="关闭" onclick="window.close()">

也要配合<base target="_self">，不然会打开一个新的IE窗口，然后再关掉的。

五、Math.random与showModalDialog。

当你设置的弹出网页固定时（如上面的"modal.htm"页面），ie很可能到临时文件区，下载上次产生的该页面，而没有重新加载。对于动态加载的页面来说，这样往往产生误会，如没有及时更新数据，也就更不利于开发者测试。所以，你可以采用如下方式：

    var strPage = "/medal.htm?random="+Math.random();

这样每次产生的strPage是不一样的，原因也就不言自明了。

六、可以通过http://servername/virtualdirname/test.htm?name=mxh方式直接向对话框传递参数吗？

答案是不能。但在frame里是可以的。

七、如何在模态对话框中进行提交而不新开窗口？

如果你的浏览器是IE5.5+，可以在对话框中使用带name属性的iframe，提交时可以指定target为该iframe的name。对于IE4+，你可以用高度为0的frame来作。（原文这里乱了，我也不费劲补了）