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的參數也有點模糊，這里也當是總結。