JavaScrip高級應用：玩轉模態與非模態

作者：愛上狗的狐貍 2010-07-15 09:11:59

本文介紹如何使用JavaScript語言來創建這兩種類型的對話框、控制其大小和位置、改變其外觀以及在對話框間的數據傳遞。

我們知道，對話框一般分為兩種類型：模態類型（modal）與非模態類型（modeless）。所謂模態對話框，就是指除非采取有效的關閉手段，用戶的鼠標焦點或者輸入光標將一直停留在其上的對話框。

非模態對話框則不會強制此種特性，用戶可以在當前對話框以及其他窗口間進行切換。本文的所有例子中，從層次上涉及到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]);

從上面的語法我們得知：除了名字有所區別外，參數種類與含義都相同。以下是各參數的含義：

◆VReturnValue：對于showModalDialog()，它表示被打開的對話框窗口設置的returnValue屬性值。對于showModelessDialog()，它表示新窗口對象。

◆VFreeArgument：這個參數可用于傳遞某種類型的數據到打開的對話框，數據可以是一個數值、字符串、數組或者一個對象類型。在新窗口中引用這個數值時，可通過新創建window對象的dialogArguments屬性。

◆SOrnaments：用這個參數指定新窗口的外觀。可選擇的窗口屬性有很多種，當有多種控制需求時，將相關內容用一個字符串連接起來，其間用分號隔開。以下是可選擇的屬性種類：

o dialogHeight: sHeight    
o dialogLeft: sXpos    
o dialogTop: sYpos    
o dialogWidth: sWidth    
o center: ( yes | no | 1 | 0 | on | off )    
o dialogHide: ( yes | no | 1 | 0 | on | off )    
o edge: ( sunken | raised )    
o help: ( yes | no | 1 | 0 | on | off )    
o resizable: ( yes | no | 1 | 0 | on | off )    
o scroll: ( yes | no | 1 | 0 | on | off )    
o status: ( yes | no | 1 | 0 | on | off )

除了以上屬性外，我們還可以加入更加豐富的CSS控制。以下我們來詳細解釋如何應用這些屬性。

#p#

二、控制對話框大小和位置

控制對話框的大小和位置涉及到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')

#p#

三、改變對話框外觀

對話框的外觀控制包括從窗口邊緣風格（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()函數更新顯示信息。可以看到，通過對象方式傳遞數據，功能很豐富強大，而且使用起來也不復雜。

結語

以上對使用JavaScript語言操作模態和非模態對話框進行了詳細介紹，相信你又掌握了在html頁面中創建窗口的一個新技術。在實際應用中，模態對話框的功能比較實用，可用于必須讓訪問者閱讀相關內容的情況下。另外，利用對象方式在窗口間傳遞數據，功能非常強大但使用卻不復雜，是非常值得一用的技術。

【編輯推薦】

深入解讀JavaScript中BOM和DOM
揭開Javascript閉包的真實面目
拔開云霧見明月透析JavaScript定時機制
早該知道的7個JavaScript技巧
那些不為人熟知的JavaScript技巧

責任編輯：王曉東來源：博客園

JavaScrip