javascript showModalDialog简单应用

以往我在页面开发中想要打开一个对话框,只能通过javascript的window.open方法实现,想要实现C/S结构下的模式窗口方式打开一个对话框真的是很难。现在的javascript里对模式窗口的支持真是让人激动人心,综合应用起来,利用DOM控制交窗口中的对象,基本上可以实现最灵活的用户导航设置。在基于WEB的办公自动化软件中使用这种模式窗口应是我们的每一选择。

这里只简单的讲讲自己的应用方式,不一定是最好的实践方法,仅供参考。

main.htm和dlg.htm两个文件,其中main.htm为程序的主窗口,dlg.htm为对话框。

在main.htm里定义打开对话框的方法,如:

function  showDlg(url,width,height){
    
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文件里定义,对父窗口的操作方法,如:

function  fadeback(){
  dialogArguments.document.getElementById(
' 父窗口中的对象 ' ).value  =   '' ;
  returnValue 
=   ' 返回值 '
 window.close();
}

上面的方法,可以在窗口关闭之前或表单提交之后调用。

dialogArguments就是在showModalDialog里传递过来的那个window,所以在fadeback里的第一行语句就是在子窗口中对父窗口的对象进行操作了。

这个returnValue一般我不怎么用,它是这个子窗口的返回值。当子窗口关闭后,父窗口中showModalDialog方法中的变量rtnVal就被赋值为这个returnValue的值。到现在为止,我只在关闭子窗口后还要关闭父窗口里使用了这个返回值。如:

 

function  showDlg(url,width,height) {
    
var rtnVal= window.showModalDialog(url,window,'dialogWidth:'+width+',dialogHeight:'+height);
    
if(rtnVal=="返回值"
         window.close;
}

注意:在模式窗口中的连接都会启动一个新的窗口。在<html>和<body>之间设置<base target="_self">,可以解决这个问题。

在应用模式窗口时还要注意很多问题,请参考:http://dev.csdn.net/article/27760.shtm

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值