模態、非模態對話框、window.open

我們知道，對話框一般分爲兩種類型：模態類型（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]);  
從上面的語法我們得知：除了名字有所區別外，參數種類與含義都相同。以下是各參數的含義：  
· 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控制。 以下我們來詳細解釋如何應用這些屬性。  
二、控制對話框大小和位置  
控制對話框的大小和位置涉及到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()函數更新顯示信息。  
可以看到，通過對象方式傳遞數據，功能很豐富強大，而且使用起來也不復雜。  
六、結 語  
以上對使用javascript語言操作模態和非模態對話框進行了詳細介紹，相信你又掌握了在html頁面中創建窗口的一個新技術。在實際應用中，模態對話框的功能比較實用，可用於必須讓訪問者閱讀相關內容的情況下。另外，利用對象方式在窗口間傳遞數據，功能非常強大但使用卻不復雜，是非常值得一用的技術。  

ShowModalDialog函數、改變模態窗口大小

ShowModalDialog函數的功能：
打開一個子窗口，並且可與父窗口相互傳遞數據，它與window.open的最大區別就在於由ShowModalDialog打開子窗口後，父窗口將不能操作。
使用方法：
vReturnValue = window.showModalDialog(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。
參數傳遞方法：
父窗口向子窗口傳遞參數採用ShowModalDialog的第2個參數即可，父窗口要獲取子窗口傳回的參數則可通過ShowModalDialog函數的返回值獲取。
子窗口獲取父窗口參數的方法爲採用子窗口window對象dialogArguments屬性獲取，例如：
var a=window.dialogArguments;
子窗口向父窗口返回參數採用window.returnValue屬性，如：
window.returnValue=1;
window.close();

 

改變模態窗口大小

1.html

<HTML>
<HEAD>
<TITLE>改變對話框的大小</TITLE>
</HEAD>
<script>
function showdialog(){
window.showModalDialog("2.html","",'edge: Raised; center: Yes; help: Yes; resizable: Yes; status: No;dialogHeight:200px;dialogWidth:300px');
}
</script>
<BODY>
<input type=button value="showdialog" οnclick="showdialog();">
</BODY>
</HTML>

2.<HTML>
<HEAD>
<TITLE>改變對話框的大小</TITLE>
</HEAD>

<BODY οnlοad=Resize_dialog(1000,1000,1000,1000)>
<SCRIPT LANGUAGE="JavaScript">
function Resize_dialog(t,l,w,h) {

window.dialogTop = t+"px";
window.dialogLeft = l+"px";
window.dialogHeight = h+"px";
window.dialogWidth = w+"px";
}

</SCRIPT>
</BODY>
</HTML>

=================================================================================

window.open是打開新窗口

window.showModalDialog(URL,dialogArgments.features) 打開一個新窗口
URL爲要開啓的網頁。
dialogArgments爲設定好傳遞給新視窗網頁的參數，可以爲任意數據類型。
feature 與open()的類似，都是格式方面的設定。調用格式爲featureName1:featureValue1:(分號)featureName2:featureValue2:
certer , dialogHeight, dialogLeft,dialogTop,dialogWidth,help(是否顯示help按鈕，下同），status,resizeable
值＝1爲yes,0爲no.

我認爲最重要的是dialogArgments，可以傳遞值到新的窗口。
第二重要就是 它的返回值 window.returnValue.可以在showModalDialog開啓的窗口關閉後前，回傳一個任意類型的值

 
====================================================================================

showModalDialog() 彈出一個對話框，對話框是依附於打開它的那個窗口的；window.open() 是開一個新窗口，和打開它的那個窗口是獨立的

showModalDialog() 必須關閉才能操作打開它的那個窗口；而 window.open() 打開的窗口不必關閉也可以操作打開它的那個窗口

二者控制打開它的窗口方法也不一樣，一個使用 dialogArguments，後者使用 opener

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1568661

 

 

 

1．  showModalDialog和showModelessDialog的異同

  同：兩者彈出的窗體不能刷新

  異：前者是模態窗口，始終獲得焦點；後者是非模態窗口，只不過彈出一個頁面，還可以操作父窗口。

2．  關閉showModalDialog和showModelessDialog彈出的窗口

    <INPUT type="button" value="ButtonClick" οnclick="self.close();">

3．  怎樣才讓在showModalDialog和showModelessDialog的彈出新窗口裏操作button,不彈出新窗口？

    在<head>和</head>之間加<base target="_self">

4.     showModalDialog的返回值

參照例子：

t1.html:

<script language="javascript">
function showpage()
{
alert(showModalDialog("t2.html"));
}
</script>
<input type="button" value="getval" onClick="showpage();">

t2.html
<HTML>
<HEAD>
<Script language="javascript">
<
function SetVal()
{
  returnValue="abc";
  close();
}
//-->
</Script>
</HEAD>
<BODY> 
<input type="button" value="Btn1" onClick="SetVal();">
</BODY>
</HTML>