JavaScript窗口功能指南之創建對話框
（作者：聽風編譯 2001年01月19日 11:35）
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（）方法之間，有些區別。被聚焦的窗口沒有與指定的窗口或者文檔相關聯。就是說，用戶不能調上來其它瀏覽器窗口，即使不是打開對話框的窗口。
（作者：聽風編譯 2001年01月19日 11:35）
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（）方法之間，有些區別。被聚焦的窗口沒有與指定的窗口或者文檔相關聯。就是說，用戶不能調上來其它瀏覽器窗口，即使不是打開對話框的窗口。
