JavaScript視窗功能指南之建立對話方塊 (轉)

JavaScript視窗功能指南之建立對話方塊 (轉)[@more@]script視窗功能指南之建立對話方塊
（作者：聽風編譯　2001年01月19日 11:35）

　　支援幾種內建的對話方塊：window.alert()、window.confirm()以及window.prompt()。當彈出一個對話方塊時，就不可以再聚焦到初始頁面，除非對話方塊操作結束。換言之，對話方塊永遠是被聚焦的。Inte Explorer支援一些方法，使用它們能讓你在任何新視窗上應用它們：

　　showModalDialog() (Internet Explorer 4 和以上版本)

　　showModelessDialog() (Internet Explorer 5 和以上版本)

　　以下是這些方法的語法：

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

　　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的程式碼：

　　

　　

　　

　　

　　

　　

　　Pick your favorite investment site:

　　

　　Fool.(The Motley Fool)

　　MoneyCentral Investor

　　TheStreet.com

　　

　　

　　

　　

　　當使用者在對話方塊中點選“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: iXP

　　設定對話方塊視窗相對於桌面左上角的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（）方法之間，有些區別。被聚焦的視窗沒有與指定的視窗或者文件相關聯。就是說，使用者不能調上來其它瀏覽器視窗，即使不是開啟對話方塊的視窗。