showModalDialog、showModelessDialog和open 区别

showModalDialog、showModelessDialog和open 区别

1.showModalDialog

大部分浏览器已支持showModalDialog函数，我们叫它为模态对话框，它有个好处是打开之后会始终保持输入焦点，在关闭它之前父窗体是无法获取焦点，这可以阻塞用户的操作等待返回，代码如下：

function  openModalDialog(){  var  vReturnValue  =  window.showModalDialog( ' http://www.google.com/ '  , '' , ' dialogHeight=400px; dialogWidth=600px; center=yes; resizable=yes; status=yes ' ); alert( ' ReturnValue： ' + vReturnValue); }

2.showModelessDialog

showModelessDialog方法打开的窗体为非模态对话框，与showModalDialog模态对话框不同的是用户可以随便切

换输入焦点，因此它不会阻塞线程等待返回结果，代码如下：

function  openModelessDialog(){  var  vReturnValue  =  window.showModelessDialog( 'http:/ /www.baidu.com/ '  , '' , ' dialogHeight=400px; dialogWidth=600px; center=yes; resizable=yes; status=yes ' ); alert( ' ReturnValue： ' + vReturnValue); }

3.open

window.open可能是我们使用得最多了，它用4个可选的参数：URL,name,features,replace，name用作标记

<a> 和 <form> 的属性 target 的值，如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建

一个新窗口，而只是返回对指定窗口的引用。features参数为窗口特征，replace为是否替换浏览历史中的当前条

目的布尔值。代码如下：

function  openWindow() { window.open("http://www.google.com/","","height=400px, width=600px, menubar=yes, scrollbars=yes, toolbar=yes, status=yes, location=yes");  }

4.兼容性

showModalDialog、showModelessDialog和open兼容性最好的是open方法了，这主要因为在W3C标准

里Window 对象方法找不到showModalDialog和showModelessDialog，大部分标准浏览器和IE都支持

window.open，而前面我说到大部分浏览器也支持showModalDialog函数，那是不完全支持。比如FF在

3.0开始才支持showModalDialog（FF2.0是不支持的），chrome浏览器支持但却没有实现

showModalDialog模态对话框的效果（形同使用window.open），而showModelessDialog可能是

因为用处少，除IE外几乎都不支持，Safari和Opera则是墙头草两边倒。

5.open模拟showModalDialog

正是由于这些兼容性问题，所以我们一般放弃使用这些方法而自己重新实现，例如我们一般会在页面使用模拟弹窗层的办法，前几天在做一项目时用到了window.open方法，突然想到能否用open模拟showModalDialog效果，发现一小伎俩，代码如下：

function  openSimulateModalDialog(){ window.newWindow  = window.open( " http://www.baidu.com/ " , "" , " height=400px, width=600px, menubar=yes, scrollbars=yes, toolbar=yes, status=yes, location=yes " ); } document.body.onclick = function  (){  if (window.newWindow  && window.newWindow.focus){ newWindow.focus(); } }

目前脚本在IE和chrome里还有点小问题，同时也没有真正实现showModalDialog效果，

因为没办法阻塞线程等待返回，同时并非主窗体在子窗体关闭前无法获取焦点，只是在click时判断是否有打开

窗体，有则打开窗体强制获取焦点。

6.小结

虽然没能使用window.open完全实现showModalDialog效果，但有时候觉得想法很重要，故出此文。

open,showModalDialog,showModelessDialog 区别 以前对showModalDialog、showModelessDialog和open的参数也有点模糊，这里也当是总结。