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個字符。也可以傳遞對象，例如：(有傳參數的函數,也有爲父窗口返回參數的函數)
1.html
<HTML>
<HEAD>
<Title>showmodal.asp</Title>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<META name="Generator" content="Asp Studio 1.0">
<script language="javascript">
function aa()
{
var mxh1 = new Array("mxh","net_lover","孟子E章")
var mxh2 = window.open("about:blank","window_mxh")
// 向對話框傳遞數組
window.showModalDialog("jieshou.asp",mxh1)
// 向對話框傳遞window對象
// window.showModalDialog("test3.htm",mxh2)
}
</script>
<script language="javascript">
function bb()
{
var a = window.showModalDialog("2.html")
for(i=0;i<a.length;i++) alert(a[i]);
document.abcd.text.value=a[0];
}
</script>
</HEAD>
<BODY><form name=abcd method=post>
<input type=text name=text size=30 />
<input type=button value=選擇 onClick="bb()" class="btn">
</form>
</BODY></HTML>
2.html
<HTML>
<HEAD>
<Title>jieshou.asp</Title>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<META name="Generator" content="Asp Studio 1.0">
<script language="javascript">
function load()
{
var a = window.dialogArguments;
alert("您傳遞的參數爲：" + a);
}
</script>
<script>
function sendTo()
{
var a=new Array("a","b")
window.returnValue = a
window.close();
}
</script>
</HEAD>
<BODY >
<form>
<input value="返回" type=button onclick="sendTo()">
</form>
</BODY>
</HTML>
常見問題：
1，如何在模態對話框中進行提交而不新開窗口？
如果你 的 瀏覽器是IE5.5+,可以在對話框中使用帶name屬性的iframe，提交時可以制定target爲該iframe的name。對於IE4+，你可以用高度爲0的frame來作：例子，
test6.htm
===================
<script>
window.showModalDialog("test7.htm")
</script>
test7.htm
===================
if(window.location.search) alert(window.location.search)
<frameset rows="0,*">
<frame src="about:blank">
<frame src="test8.htm">
</frameset>
test8.htm
===================
<form target="_self" method="get">
<input name=txt value="test">
<input type=submit>
</form>
<script>
if(window.location.search) alert(window.location.search)
</script>
2,可以通過http://servername/virtualdirname/test.htm?name=mxh方式直接向對話框傳遞參數嗎？
答案是不能。但在frame裏是可以的。
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()裏：
<form target=meizz action=aa.asp ...>
在主頁面里加一個隱藏的iframe浮動框架：
<iframe name=meizz width=0 height=0 frameborder=0 style="display: none"><iframe>
這樣提交就不會有新的頁面產生了。
JavaScript支持幾種內建的對話框：window.alert()、window.confirm()以及window.prompt()。當彈出一個對話框時，用戶就不可以再聚焦到初始頁面，除非對話框操作結束。換言之，對話框永遠是被聚焦的。Internet Explorer支持一些方法，使用它們能讓你在任何新窗口上應用它們：
showModalDialog() (Internet Explorer 4 和以上版本)
showModelessDialog() (Internet Explorer 5 和以上版本)
以下是這些方法的語法：
vReturnValue = window.showModalDialog(sURL[, vArguments][, sFeatures]);
vReturnValue = window.showModelessDialog(sURL[, vArguments][, sFeatures]);
第1個參數是一個字符串，它指定了在新窗口中裝載並顯示的文檔URL。第2個參數，vArguments，是一個variant，它指定了顯示文檔的命令。使用這個參數時，可以傳遞任意類型的數組或者數值。對話框能夠從window對象的dialogArguments屬性中將數值傳遞給調用者。
當通過其中一個方法打開一個新窗口時，新窗口（對話框）的window對象特寫了dialogArguments屬性，它包含了分配給調用方法的vArguments參數的數值。來看看下面的語句：
window.showModalDialog("modalurl.html", window);
注意，第2個命令參數實際上是當前瀏覽器窗口的window對象。下面是文件modalurl.html的代碼：
<HTML>
<HEAD>
<TITLE>Change the URL</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function load(menu) {
if (window.dialogArguments && dialogArguments.location) {
dialogArguments.location.href = menu.options[menu.selectedIndex].value;
window.close();
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
Pick your favorite investment site:<P>
<FORM><SELECT NAME="menu">
<OPTION VALUE="http://www.fool.com/">Fool.com (The Motley Fool)
<OPTION VALUE="http://www.investor.com/">MoneyCentral Investor
<OPTION VALUE="http://www.thestreet.com/">TheStreet.com
</SELECT>
<INPUT TYPE="button" VALUE="Load" onClick="load(this.form.menu)"></FORM>
</BODY>
</HTML>
當用戶在對話框中點擊“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 onBlur="window.focus()">
如果你在< body >標記中使用上面的事件處理程序，那麼包含文檔的窗口就會被聚焦，直到用戶關閉它。在這個僅Navigator適用的技術與Internet Explorer的showModalDialog（）方法之間，有些區別。被聚焦的窗口沒有與指定的窗口或者文檔相關聯。就是說，用戶不能調上來其它瀏覽器窗口，即使不是打開對話框的窗口。
我們知道，對話框一般分爲兩種類型：模態類型（modal）與非模態類型（modeless）。所謂模態對話框，就是指除非採取有效的關閉手段，用戶的鼠標焦點或者輸入光標將一直停留在其上的對話框。非模態對話框則不會強制此種特性，用戶可以在當前對話框以及其他窗口間進行切換。本文介紹如何使用JavaScript語言來創建這兩種類型的對話框、控制其大小和位置、改變其外觀以及在對話框間的數據傳遞。
本文的所有例程中，從層次上涉及到2個HTML頁面。我們把第一個頁面叫做caller頁面，第二個頁面叫做callee頁面。也就是說，在caller頁面執行代碼創建生成callee頁面。
一、創建模態和非模態對話框
首先，我們舉個例子來快速瞭解一下什麼是模態與非模態。在caller.htm中，我們輸入以下代碼：
<INPUT TYPE="button" VALUE="創建模態對話框" onclick="fnOpenModal()">
<br><br>
<INPUT TYPE="button" VALUE="創建非模態對話框" onclick="fnOpenModeless()">
<script language="javascript">
function fnOpenModal(){
window.showModalDialog("callee.htm")
}
function fnOpenModeless(){
window.showModelessDialog("callee.htm")
}
</script>
在瀏覽器中打開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頁面中輸入以下代碼：
<INPUT TYPE="button" VALUE="創建模態對話框" onclick="fnOpenModal()">
<br><br>
<INPUT TYPE="button" VALUE="創建非模態對話框" onclick="fnOpenModeless()">
<script language="javascript">
<!--
function fnOpenModal(){
window.showModalDialog("callee.htm","打開了一個新模態窗口")
}
function fnOpenModeless(){
window.showModelessDialog("callee.htm","打開了一個新非模態窗口")
}
// -->
</script>
在callee.htm頁面中輸入以下代碼：
<SCRIPT LANGUAGE="JavaScript">
<!--
alert(dialogArguments);
// -->
</SCRIPT>
在瀏覽器中打開caller.htm，點擊任意一個按鈕，我們將首先看到如下的提示信息框：
然後纔出現新窗口。這種情況下，callee.htm頁面中的window對象的屬性dialogArguments將對應於caller.htm頁面中的"打開了一個新模態窗口"或者"打開了一個新非模態窗口"。如果直接打開callee.htm，將會出現錯誤提示。
（二）傳遞數組引用類型數據
第一種值類型數據的傳遞中，在callee.htm頁面中只能讀取caller.htm頁面的傳遞數據。當需要對caller.htm頁面的傳遞內容進行修改時，就需使用到數組引用類型的傳遞方式。
首先，在caller.htm頁面中輸入以下代碼：
<INPUT TYPE="button" VALUE="創建模態對話框" onclick="fnOpenModal()">
<br><br>
<INPUT TYPE="button" VALUE="創建非模態對話框" onclick="fnOpenModeless()">
<script language="javascript">
<!--
var a = new Array;
a[0]="first";
a[1]="second";
a[2]="third";
function fnOpenModal(){
window.showModalDialog("callee.htm",a)
}
function fnOpenModeless(){
window.showModelessDialog("callee.htm",a)
}
// -->
</script>
然後在callee.htm頁面中輸入以下代碼：
<SCRIPT LANGUAGE="JavaScript">
<!--
a = dialogArguments;
alert(a);
a[0] = "fourth";
// -->
</SCRIPT>
最後，在瀏覽器中打開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中輸入以下代碼：
<HTML>
<HEAD>
<TITLE>傳遞對象數據</TITLE>
<SCRIPT>
var sColor="";
function callDialog() {
showModelessDialog("callee.html",window,"status:false;dialogWidth:300px;dialogHeight:150px");
}
function update()
{
oColor.innerText = sColor;
}
</SCRIPT>
</HEAD>
<BODY>
<P>輸入你最喜歡的顏色: <SPAN ID="oColor" STYLE="color:red;font-size:24">Yellow</SPAN></P>
<INPUT TYPE="button" VALUE="Display Modeless Dialog" onclick="callDialog()">
</BODY>
</HTML>
在callee.htm中輸入以下代碼：
<HTML>
<HEAD>
<TITLE>callee.html</TITLE>
<SCRIPT>
function getInfoAndUpdate() {
var callerWindowObj = dialogArguments;
callerWindowObj.sColor = oEnterColor.value;
callerWindowObj.update();
}
function cancel() {
var callerWindowObj = dialogArguments;
callerWindowObj.sColor = "Yellow";
callerWindowObj.update();
}
</SCRIPT>
</HEAD>
<BODY>
輸入你最喜歡的顏色:<INPUT ID=oEnterColor><BR><BR>
<INPUT VALUE="Apply" TYPE=button onclick="getInfoAndUpdate();">
<INPUT VALUE="Ok" TYPE=button onclick="getInfoAndUpdate();window.close();">
<INPUT VALUE="Cancel" TYPE=button onclick="cancel();window.close();">
</BODY>
</HTML>
在瀏覽器中打開caller.htm，點擊“顯示非模態對話框”按鈕，出現新對話框：
在對話框中輸入其他顏色名稱，點擊“Apply”按鈕後，執行callee.htm中的getInfoAndUpdate函數：
function getInfoAndUpdate() {
var callerWindowObj = dialogArguments;
callerWindowObj.sColor = oEnterColor.value;
callerWindowObj.update();
}
因爲在caller.htm中傳遞給callee.htm的是對象類型數據window，所以經過第一條語句的附值，callerWindowObj就指向了caller.htm頁面，然後就可以在callee.htm中按照callerWindowObj.xxx的形式引用caller.htm中的變量及函數：callerWindowObj.sColor = oEnterColor.value負責將callee.htm中輸入的顏色名稱傳遞給caller.htm中的變量sColor，然後再執行caller.htm中的 update()函數更新顯示信息。
