js中的showModalDialog()与showModelessDialog()的比较

创建一个显示HTML内容的非模态对话框

代码：window.showModelessDialog("url","name","参数：值,参数：值；……")

创建一个显示HTML内容的模态对话框

代码：window.showModalDialog("url","name","参数：值,参数：值；……")

说明：url：对话框窗口链接地址
　　name：对话框的名称，可以为空
　　scroll {yes | no | 1 | 0 }：是否有滚动条，也可通过on和off来控制。下同
　　status: {yes | no | 1 | 0 }：是否有状态栏。
　 help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
　　resizable: {yes | no | 1 | 0 }：是否可以用鼠标拖动改变框口大小，默认no。
　　dialogWidth：对话框宽度值
　　dialogHeight：对话框高度值
dialogLeft: 距离桌面左的距离。
　　dialogTop: 离桌面上的距离。
例子：window.showModelessDialog(urlstr,window,'dialogWidth='+width +'px;dialogHeight='+height+'px;help:no;status:no;scroll:no;dialogLeft='+x+';dialogTop='+y);模态窗口就好像新建了一个容器，然后再在里面放入新的页面。此方法打开的页面在高版本的浏览器上也有弹出效果。
status(状态栏)：

help(问号)：

以前一直以为showModalDialoge()不能在高版本（指ie6、ie7以上的版本）的浏览器中显示成弹出框的效果，今天改一个老项目的时候突然发现通过下面的方法就能够在高版本的浏览器中实现弹出框效果了，而且还可以把弹出框容器做成公共的。非常方便，下面是代码：

页面index.html

<html>
<input type="button" value="打开模态窗口" onClick="dlgOpen('我的窗口','content.html',500,300)" />
</html>
<script>
function dlgOpen(aTitle, aUrl, aWidth, aHeight)
{
  var myDialogArg = new Object();
  myDialogArg.title = aTitle;
  myDialogArg.url = aUrl;
  var myFeatures = "center: Yes; help: No; resizable: No; status: No; dialogWidth: " + aWidth + "px; dialogHeight: " + aHeight + "px;";
  var myRetval = window.showModalDialog("dialog.html", myDialogArg, myFeatures);
  //var myRetval = window.showModelessDialog("dialog.html", myDialogArg, myFeatures);
  if (myRetval == null)
    return null;
  else
    return myRetval;
}
</script>

页面dialog.html

<html>
  <head>
    <title>Common Dialog</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  </head>
  
  <script language="JavaScript">
    document.title=window.dialogArguments.title;
  </script>
  
  <script language="JavaScript" for="window" event="onload">
    dlgframe.opener = window;
    dlgframe.location = window.dialogArguments.url;
  </script>
  
  <frameset cols="*">
    <frame name="dlgframe" src="">
  </frameset>

  <noframes><body>
  </body></noframes>
</html>

页面content.html

<html>
    <body>
         任何你要呈现的内容放在这个页面，这种页面可以有很多个。它们使用公共的容器dialog.html
    </body>
<html>

还有很多不完善的地方，待择日修改！

posted on 2012-09-26 17:16 快鸟阅读(406) 评论(0) 收藏举报