随笔 - 230, 文章 - 2, 评论 - 47
  博客园  :: 联系 :: 管理

window.showModalDialog 的使用方法

Posted on 2012-02-04 17:12  独孤雁  阅读(536)  评论(0编辑  收藏

以前为了浏览器的兼容性,在开发时从未使用过 window.showModalDialog ,从 FF3 开始已经支持 window.showModalDialog (FF2不支持此方法),GOOGLE的浏览器也是支持的(非模式窗体,与open方法打开的窗体一样),今天研究了一下具体的使用方法,如下:

【注意】
在IE下,弹出的模式窗体中,如果存在表单,则在提交表单时,会自动弹出一个 新的窗口。
解决方法:
在 <head> </head>中增加如下标签即可
<base target="_self" />



【父窗体 1.html 】

<html>
<head>
<title>ParentWindow</title>
<script>
var a = new Array;
a[0] = 1;
a[1] = 4;

dialogwidth  = 450;
dialogheight = 300;

function openModal()
{
  dialogleft   = ( window.screen.width  - dialogwidth  ) / 2;
  dialogtop    = ( window.screen.height - dialogheight ) / 2;
  //document.getElementById('foo').innerHTML = "HELLO";
  var r = window.showModalDialog('2.html',
      window.self, // 此参数可为任意类型 window.self 可使子窗体具备操作父窗体的功能
      "center:0; dialogleft:"+ dialogleft +"px;dialogtop: "+ dialogtop +"px; dialogwidth: "+ dialogwidth +"px; dialogheight: "+ dialogheight +"px; resizable: yes; scroll: yes;");
  //alert(r);
  if(r==null || r=="undefined"){ // 判断是否异常关闭(点击窗体“关闭”按钮)
      document.getElementById('foo').innerHTML = "NULL";
  }else{
      document.getElementById('foo').innerHTML = r;
      // window.location.reload(true); // 刷新窗体
  }
  //alert(dialogwidth);
}

// 在子窗体中调用此函数
function parentFunc(param){
    //alert(param); // firefox 中加入此句后,模式窗口将不再起作用(即可点击操作父窗体)
    document.getElementById('foo').innerHTML = param;
}
</script>
</head>
 
<body>
<input type="button" value="Open modal dialog" onclick="openModal();">
<div>
<p>Modal dialog return value:</p>
<p id="foo">
</div>
</body>
</html>



【模式窗体 2.html 】

<html>
<head>
<title>ModalDialog</title>

<script type="text/javascript" src="http://blog.163.com/shihua_23/blog/1.js"></script>

</head>
<body>
<input id="foo" type="text" value="Dialog value...">
<input type="button" value="Close" onclick="closeModalDialog();">
<a href="http://blog.163.com/shihua_23/blog/safe.html">link</a>
</body>
</html>


【js 代码 1.js 】

document.write("Modal dialog got argument: " + window.dialogArguments);
//alert(window.dialogArguments); // 获得参数。注意:在 firefox 中,点击 F5 刷新模式窗体后,此参数将丢失,IE下不会丢失
//alert(window.dialogArguments.dialogwidth);
//window.dialogArguments.dialogwidth = 1000; // 给父窗体中全局变量赋值
window.dialogArguments.parentFunc(window.dialogArguments.dialogwidth); // 调用父窗体函数
//window.dialogArguments.location.reload(true); // 刷新父窗体

function closeModalDialog(){
    //alert(window.dialogArguments);
    window.returnValue = document.getElementById('foo').value; // window.returnValue 为模式窗体的返回值
    window.close();
}

特别注意:
在FF3中,不能将 1.js 的代码放在 2.html 中,例如:

<html>
<head>
<title>ModalDialog</title>

<script type="text/javascript" >
document.write("Modal dialog got argument: " + window.dialogArguments);
//alert(window.dialogArguments); // 获得参数。注意:在 firefox 中,点击 F5 刷新模式窗体后,此参数将丢失,IE下不会丢失
//alert(window.dialogArguments.dialogwidth);
//window.dialogArguments.dialogwidth = 1000; // 给父窗体中全局变量赋值
window.dialogArguments.parentFunc(window.dialogArguments.dialogwidth); // 调用父窗体函数
//window.dialogArguments.location.reload(true); // 刷新父窗体

function closeModalDialog(){
    //alert(window.dialogArguments);
    window.returnValue = document.getElementById('foo').value; // window.returnValue 为模式窗体的返回值
    window.close();
}
</script>

</head>
<body>
<input id="foo" type="text" value="Dialog value...">
<input type="button" value="Close" onclick="closeModalDialog();">
<a href="http://blog.163.com/shihua_23/blog/safe.html">link</a>
</body>
</html>

理由:在 FF3 中,这样写会导致 模式窗体自动刷新一次,从而使的 window.dialogArguments 变量重置为null(FF3不支持模式窗体的F5刷新)