showModalDialog()、showModelessDialog()方法使用詳解

Javascript有許多內建的方法來產生對話方塊，如：window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支援對話方塊。如：

　　showModalDialog() (IE 4+ 支援)
　　showModelessDialog() (IE 5+ 支援)

window.showModalDialog()方法用來建立一個顯示HTML內容的模態對話方塊，由於是對話方塊，因此它並沒有一般用window.open()開啟的視窗的所有屬性。
window.showModelessDialog()方法用來建立一個顯示HTML內容的非模態對話方塊。

當我們用showModelessDialog()開啟視窗時，不必用window.close()去關閉它，當以非模態方式［IE5］開啟時， 開啟對話方塊的視窗仍可以進行其他的操作，即對話方塊不總是最上面的焦點，當開啟它的視窗ＵＲＬ改變時，它自動關閉。而模態［ＩＥ４］方式的對話方塊始終有焦點（焦點不可移走，直到它關閉）。模態對話方塊和開啟它的視窗相聯絡，因此我們開啟另外的視窗時，他們的連結關係依然儲存，並且隱藏在活動視窗的下面。

使用方法如下：
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
引數說明：
sURL
必選引數，型別：字串。用來指定對話方塊要顯示的文件的URL。
vArguments
可選引數，型別：變體。用來向對話方塊傳遞引數。傳遞的引數型別不限，包括陣列等。對話方塊透過window.dialogArguments來取得傳遞進來的引數。
sFeatures
可選引數，型別：字串。用來描述對話方塊的外觀等資訊，可以使用以下的一個或幾個，用分號“;”隔開。
dialogHeight 對話方塊高度，不小於１００px，ＩＥ４中dialogHeight 和 dialogWidth 預設的單位是em，而ＩＥ５中是px，為方便其見，在定義modal方式的對話方塊時，用px做單位。
　　dialogWidth: 對話方塊寬度。
　　dialogLeft: 距離桌面左的距離。
　　dialogTop: 離桌面上的距離。
　　center: {yes | no | 1 | 0 }：視窗是否居中，預設yes，但仍可以指定高度和寬度。
　　help: {yes | no | 1 | 0 }：是否顯示幫助按鈕，預設yes。
　　resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改變大小。預設no。
　　status: {yes | no | 1 | 0 } ［IE5+］：是否顯示狀態列。預設為yes[ Modeless]或no[Modal]。
scroll:{ yes | no | 1 | 0 | on | off }：指明對話方塊是否顯示捲軸。預設為yes。

還有幾個屬性是用在HTA中的，在一般的網頁中一般不使用。
dialogHide:{ yes | no | 1 | 0 | on | off }：在列印或者列印預覽時對話方塊是否隱藏。預設為no。
edge:{ sunken | raised }：指明對話方塊的邊框樣式。預設為raised。
unadorned:{ yes | no | 1 | 0 | on | off }：預設為no。

傳入引數：
要想對話方塊傳遞引數，是透過vArguments來進行傳遞的。型別不限制，對於字串型別，最大為4096個字元。也可以傳遞物件，例如：

test1.htm
====================

test2.htm
====================

test3.htm
====================

可以透過window.returnValue向開啟對話方塊的視窗返回資訊，當然也可以是物件。例如：

test4.htm
===================

test5.htm
===================

常見問題：
1，如何在模態對話方塊中進行提交而不新開視窗？
如果你 的 瀏覽器是IE5.5+,可以在對話方塊中使用帶name屬性的iframe，提交時可以制定target為該iframe的name。對於IE4+，你可以用高度為0的frame來作：例子，

test6.htm
===================

test7.htm
===================
if(window.location.search) alert(window.location.search)

test8.htm
===================

pWindow = showModelessDialog("components/inspector.htm",[window,curObj],"dialogWidth:395px;dialogHeight:227px;dialogLeft:400;dialogTop:200;help:no;status:no;scroll:no;resizable:yes");
..
..
..
function sTarResizeCw(width,height){
pWindow.dialogLeft = pWindow.dialogLeft;//為了保持位置不變,否則預設還原到開啟時候的 center=yes
pWindow.dialogTop = pWindow.dialogTop; //結果失敗了，：（ 繼續中找資料中.....
pWindow.dialogWidth = width+"px";
pWindow.dialogHeight = height+"px";
}

pWindow 是返回值，不是視窗物件，因此不能象一般用window.open開啟的視窗那樣進行操作。模態對話方塊的屬性是在開啟時設定的

對於showModalDialog()得交彈出新網頁的解決方法：
showModalDialog()是不能夠提交給自己的，得交給自己的話就會有新頁面產生，所以你要指寫form裡的target等於一個值。

showModalDialog()裡：

　　當使用者在對話方塊中點選“Load”按鈕，開啟者視窗的URL就變為選擇的數值。為了數值視窗文件的URL，我們必須分配一個數值給需要window物件的location.href屬性。在這裡，我們指定呼叫者的window物件做為showModalDialog()方法的第2個引數，所以，新視窗（對話方塊）中dialogArguments屬性就對應於呼叫者的window物件。

　　注意函式開始的物件檢測程式段。因為dialogArguments屬性只存在於由showModalDialog（）和showModelessDialog（）方法建立的視窗中，所以，我們必須確認在使用它們前這個屬性是否存在。而且，我們需要查詢一個location.href屬性來確認dialogArguments屬性真正地對應於一個合法的window物件。

　　load（）函式的最後語句關閉對話方塊，從而指定的文件能夠在原始視窗被裝載。注意，如果我們使用showModelessDialog（）方法替代showModalDialog（）方法，我們就不需要特別地關閉視窗，因為，即使對話方塊仍然開啟時，新的URL依然會在下面的視窗（開啟者）被裝載。在這裡，當呼叫者的URL改變時（呼叫新頁面），對話方塊自動關閉。　　當在Internet Explorer 5中執行showModelessDialog（）時，出現一個對話方塊，它位於瀏覽器視窗前面。使用者仍舊可以操縱下面的視窗，但是對話方塊會始終在上面。對話方塊與開啟它的瀏覽器視窗相關聯，所以，如果使用者產生了一個不同的視窗，對話方塊與它的產生者一同被隱藏在後面。注意，一個modeless對話方塊實際上連線到一個包含產生它的指令碼的文件，所以，如果使用者在開啟者視窗中裝載另一個不同的URL，對話方塊將自動關閉。

　　Internet Explorer 4 中的showModalDialog（）方法就完全不同。它建立一個modal對話方塊，並一直保持焦點直到被關閉。使用者根本不能訪問到開啟者視窗。一個modal對話方塊與開啟它的瀏覽器視窗相關聯，所以，如果使用者產生一個不同的瀏覽器視窗，對話方塊就與它的原始視窗一起被隱藏在活動視窗的下面。

　　現在是回來討論showModalDialog（）和showModelessDialog（）方法的引數的時候了。第3個引數，sFeatures，是一個字串，它指定了對話方塊視窗的修飾特徵，具體就是使用下面的一個或者多個以逗號分隔的數值：

　　dialogHeight: iHeight

　　設定對話方塊視窗的高度。儘管使用者能夠手工地調整一個對話方塊的高度為一個較小數值（要求產生的對話方塊是大小可變的），但是你可以指定的最小dialogHeight是100象素（pixels）。注意，在Internet Explorer 4.0中dialogHeight和dialogWidth的預設測量單位“em”，而在Internet Explorer 5中則是px（象素）。為了保持一致性，當設計modal對話方塊時，請以象素為單位指定dialogHeight和dialogWidth。

　　dialogWidth: iWidth

　　設定對話方塊視窗的寬度。

　　dialogLeft: iXPos

　　設定對話方塊視窗相對於桌面左上角的left位置。

　　dialogTop: iYPos

　　設定對話方塊視窗相對於桌面左上角的top位置。

　　center: {yes | no | 1 | 0 }

　　指定是否將對話方塊在桌面上居中，預設值是“yes”。為了避免居中，你可以設定為dialogLeft或者dialogTop。

　　help: {yes | no | 1 | 0 }

　　指定對話方塊視窗中是否顯示上下文敏感的幫助圖示。預設值是“yes”。

　　resizable: {yes | no | 1 | 0 } (Internet Explorer 5 and above)

　　指定是否對話方塊視窗大小可變。預設值是“no”。

　　status: {yes | no | 1 | 0 } (Internet Explorer 5 和以上版本)

　　指定對話方塊視窗是否顯示狀態列。對於非依賴對話方塊視窗，預設值是“yes”；對於依賴對話方塊視窗，預設值是 “no”。

物件檢測
　　showModalDialog() 和 showModelessDialog() 方法並非被所有支援JavaScript的瀏覽器所支援。在呼叫任何一個方法之前，我們必須確認它們的有效性：

　　if (window.showModalDialog) {

　　 ...

　　}

　　if (window.showModelessDialog) {

　　 ...

　　}

　　如果使用者的瀏覽器不能支援需要的方法，你也許希望考慮一個可供選擇的行為，這可以透過呼叫window.open（）方法來實現：

　　if (window.showModalDialog) {

　　 win = window.showModalDialog("mydialog.html", ...);

　　} else {

　　 win = window.open("mydialog.html", ...);

　　}

一個交叉瀏覽器Modal對話方塊
　　看看下面的定義 (Navigator適用）:

　　如果你在< body >標記中使用上面的事件處理程式，那麼包含文件的視窗就會被聚焦，直到使用者關閉它。在這個僅Navigator適用的技術與Internet Explorer的showModalDialog（）方法之間，有些區別。被聚焦的視窗沒有與指定的視窗或者文件相關聯。就是說，使用者不能調上來其它瀏覽器視窗，即使不是開啟對話方塊的視窗。

我們知道，對話方塊一般分為兩種型別：模態型別（modal）與非模態型別（modeless）。所謂模態對話方塊，就是指除非採取有效的關閉手段，使用者的滑鼠焦點或者輸入游標將一直停留在其上的對話方塊。非模態對話方塊則不會強制此種特性，使用者可以在當前對話方塊以及其他視窗間進行切換。本文介紹如何使用JavaScript語言來建立這兩種型別的對話方塊、控制其大小和位置、改變其外觀以及在對話方塊間的資料傳遞。
本文的所有例程中，從層次上涉及到2個HTML頁面。我們把第一個頁面叫做caller頁面，第二個頁面叫做callee頁面。也就是說，在caller頁面執行程式碼建立生成callee頁面。
一、建立模態和非模態對話方塊
首先，我們舉個例子來快速瞭解一下什麼是模態與非模態。在caller.htm中，我們輸入以下程式碼：






在瀏覽器中開啟caller.htm，點選“建立模態對話方塊”按鈕，將會出現一個對話方塊視窗，其中的內容是callee.htm。你會看到，除了關閉這個新視窗，無論怎樣我們也不能將其他的視窗設定為“當前活動”視窗，這個一直是活動狀態的視窗型別就是模態型別。關閉這個模態對話方塊，回到caller.htm頁面，點選“建立非模態對話方塊”，出現一個包含callee.htm頁面的對話方塊視窗。這回有所不同，滑鼠可以轉移到其他地方使另外的視窗成為“當前活動”狀態，這就是非模態的概念。
接下來，我們看看建立模態對話方塊與非模態對話方塊的相關語法：
建立模態對話方塊：
vReturnValue = window.showModalDialog(sURL [, vFreeArgument] [, sOrnaments]);
建立非模態對話方塊：
vReturnValue = window.showModelessDialog(sURL [, vFreeArgument] [, sOrnaments]);
從上面的語法我們得知：除了名字有所區別外，引數種類與含義都相同。以

二、控制對話方塊大小和位置
控制對話方塊的大小和位置涉及到5個方面：高度（dialogHeight）、寬度（dialogWidth）、相對於桌面左上角的x座標（dialogLeft）、y座標（dialogTop）以及是否讓對話方塊視窗居中（center）。由於不同版本的Internet Explorer瀏覽器處理的預設度量單位並非一致，所以我們在指定高度、寬度等大小時，最好是同時設定好單位。單位種類包括很多，比如cm、mm、in、pt、pc、px。請注意：最小的高度值是100px。
下面的程式碼將開啟一個高200px、寬800px的對話方塊：
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px');
我們注意到，開啟的新視窗會在桌面中處於居中的位置，這也正是居中屬性（center）的預設值。居中屬性（center）的可取值包括yes、no、1、0、on和off，含義一目瞭然。執行以下程式碼，看看關閉居中屬性後新視窗的位置：
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;center:no');
我們看到，新視窗緊挨者桌面的左上角開啟。當然，我們可以使用dialogLeft和dialogTop 屬性來精確定義新視窗的開啟位置。下面的程式碼將在相對於桌面左上角的x位置300px和y位置500px處開啟新視窗：
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;dialogLeft:300;
dialogTop:500')
注意，即使指定了居中屬性，但如果同時設定了dialogLeft和dialogTop屬性值，那麼視窗位置將遵從後者。試一試執行下面的程式碼：
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;dialogLeft:300;
dialogTop:500;center:yes')
三、改變對話方塊外觀
對話方塊的外觀控制包括從視窗邊緣風格（edge）、是否存在捲軸（scroll）、是否包含上下文關聯提示圖示（help）、是否顯示狀態列（status）以及是否可以改變視窗大小（resizable）等方面。預設情況下，新開啟的視窗是大小不可改變的、邊緣風格為凸起、在新視窗右上角顯示一個上下文關聯提示圖示、存在捲軸，比如：


edge的可取值為sunken（凹陷）和raised（凸起），status、help、resizeable和scroll的可取值都是yes、no、1、0、on和off，其含義一目瞭然。
下面的程式碼將去除上下文關聯提示圖示、不顯示狀態列、視窗邊緣風格為凹陷：
showModelessDialog("callee.htm","","status:0;help:0;edge:sunken");
執行後，圖示如下：


四、從caller頁面傳遞資料到callee頁面
上面我們介紹了建立模態和非模態視窗的語法以及如何控制新視窗的大小、位置和外觀，接下來我們研究一下實際應用中更實用的功能：如何從caller頁面傳遞資料到callee頁面。
從caller頁面傳遞給callee頁面的資料分為3類：傳遞值、傳遞陣列引用以及傳遞物件,它們都是透過showModalDialog()和showModelessDialog()的第2個引數實現的。
（一）傳遞值型別資料
在caller.htm頁面中輸入以下程式碼：






在callee.htm頁面中輸入以下程式碼：

在瀏覽器中開啟caller.htm，點選任意一個按鈕，我們將首先看到如下的提示資訊框：



然後才出現新視窗。這種情況下，callee.htm頁面中的window物件的屬性dialogArguments將對應於caller.htm頁面中的"開啟了一個新模態視窗"或者"開啟了一個新非模態視窗"。如果直接開啟callee.htm，將會出現錯誤提示。
（二）傳遞陣列引用型別資料
第一種值型別資料的傳遞中，在callee.htm頁面中只能讀取caller.htm頁面的傳遞資料。當需要對caller.htm頁面的傳遞內容進行修改時，就需使用到陣列引用型別的傳遞方式。
首先，在caller.htm頁面中輸入以下程式碼：






然後在callee.htm頁面中輸入以下程式碼：

最後，在瀏覽器中開啟caller.htm，點選任意一個按鈕，我們將首先看到如下的對話方塊：


接著關閉這個對話方塊以及新開啟的視窗，再次點選一個按鈕，又出現一個對話方塊：


從執行結果我們看到，在caller.htm頁面中透過對陣列a的地址引用，就可以實現在callee.htm中修改陣列a的內容。
注意在callee.htm中要首先建立對傳遞資料的附值：a = dialogArguments。
（三）傳遞物件型別資料
在caller.htm和callee.htm中傳遞資料的最有效方式是透過物件方式進行，這不僅能實現從caller.htm到callee.htm的傳遞，還能從callee.htm傳遞到caller.htm。而且，我們還可以在caller.htm中定義物件的方法，再在callee.htm中使用它們。實際上，我們可以將caller.htm的window物件傳遞給callee.htm，這樣就可以在callee.htm中訪問caller.htm的變數及函式。
來看看一個實際的例子。在caller.htm中輸入以下程式碼：

輸入你最喜歡的顏色: Yellow