IE vs. FireFox 系列 - showModalDialog

在網頁程式中,
有時我們會希望使用者按下按鈕後開啟一個保持在原視窗前方的子視窗,
而在IE中,我們可以使用showModalDialog來達成,
語法如下 :

vReturnValue = window .showModalDialog( sURL [ , vArguments ] [ , sFeatures ] )

範例:

window.showModalDialog("openwin.html","Arguments","dialogHeight: 200px; dialogWidth: 200px; dialogTop: 10px; dialogLeft: 10px; edge: Raised; center: Yes; help: Yes; resizable: Yes; status: Yes;");

但是.在Firefox中卻沒有showModalDialog這東西,
而在FireFox中我們只能使用window.open實現這樣的功能,
window.open的語法如下 :

oNewWindow = window .open( [ sURL ] [ , sName ] [ , sFeatures ] [ , bReplace ] )

只是,在Firefox下,window.open的參數中,sFeature多了一些功能設定,
而在FireFox下要讓開啟的視窗跟IE的showModalDialog一樣的話,
只要在sFeatures中加個modal=yes就可以了,
範例如下:

window.open('openwin.html','newWin','modal=yes,width=200,height=200,resizable=no,scrollbars=no');

提到了子視窗,不得不提的就是子視窗跟母視窗間的交互操作,
因為我想很多人開啟對話視窗應該都是為了將操作完的結果丟回去給母視窗...

如果是用showModalDialog的話,
在子視窗中要存取母視窗的函數的話,
要注意兩個地方,
1.(母視窗中)開啟視窗:

window.showModalDialog("openwin.html",self,'modal=yes,width=775,height=700,resizable=no,scrollbars=no');

在第二個參數(vArguments),改成self.

2.(子視窗中)調用母視窗的函數:

window.dialogArguments.ShowMsg(obj.value);

ShowMsg為母視窗中的函數.

而使用window.open的話,
則是要注意一個地方,
1.(子視窗中)調用母視窗的函數:

window.opener.ShowMsg(obj.value);

使用window.opener去接母視窗的物件.

如此一來,只要再透過navigator.appName去判斷瀏覽器為何,
就可以寫一個IE與FireFox相容的函數...

下面是範例網頁及程式
Source Download
Demo Page

相關網址 :

showModalDialog Method
open Method
DOM:window.open
關閉popup視窗同時更新原本的視窗


posted on 2008/4/1 20:12 | 閱讀數 : 7508 我要推薦 | 2 Comments | 分類 [ Javascript 技術相關 程式相關 ] 訂閱

Comments on this post

# re: IE vs. FireFox 系列 - showModalDialog

謝謝你喔,我終於完成了我的window.open^^
Left by 感謝的人 on 十二月 09, 2008 11:45 上午
回覆

# re: IE vs. FireFox 系列 - showModalDialog

Adam好厲害唷~
google第一筆就是你的網頁耶 XD
Left by Ken on 三月 07, 2012 11:37 上午
回覆

回應:

Please add 8 and 6 and type the answer here: