以往我在页面开发中想要打开一个对话框,只能通过javascript的window.open方法实现,想要实现C/S结构下的模式窗口方式打开一个对话框真的是很难。现在的javascript里对模式窗口的支持真是让人激动人心,综合应用起来,利用DOM控制交窗口中的对象,基本上可以实现最灵活的用户导航设置。在基于WEB的办公自动化软件中使用这种模式窗口应是我们的每一选择。
这里只简单的讲讲自己的应用方式,不一定是最好的实践方法,仅供参考。
main.htm和dlg.htm两个文件,其中main.htm为程序的主窗口,dlg.htm为对话框。
在main.htm里定义打开对话框的方法,如:
var rtnVal = window.showModalDialog(url,window, ' dialogWidth: ' + width + ' ,dialogHeight: ' + height);
}
url是文件的连接地址;window就是父窗口的window对象,以便子窗口可以调用主窗体的DOM;后面的是窗口的宽度和高度。showModalDialog的详细的参数,请参考:http://blog.csdn.net/qunluo/archive/2005/11/21/533727.aspx
在dlg.htm文件里定义,对父窗口的操作方法,如:
dialogArguments.document.getElementById( ' 父窗口中的对象 ' ).value = '' ;
returnValue = ' 返回值 '
window.close();
}
上面的方法,可以在窗口关闭之前或表单提交之后调用。
dialogArguments就是在showModalDialog里传递过来的那个window,所以在fadeback里的第一行语句就是在子窗口中对父窗口的对象进行操作了。
这个returnValue一般我不怎么用,它是这个子窗口的返回值。当子窗口关闭后,父窗口中showModalDialog方法中的变量rtnVal就被赋值为这个returnValue的值。到现在为止,我只在关闭子窗口后还要关闭父窗口里使用了这个返回值。如:
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1327ab569c1ae82736693a50b8e33378.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif)
注意:在模式窗口中的连接都会启动一个新的窗口。在<html>和<body>之间设置<base target="_self">,可以解决这个问题。
在应用模式窗口时还要注意很多问题,请参考:http://dev.csdn.net/article/27760.shtm