window.showModalDialog介绍
window.showModalDialog的用法
基本介紹：
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用來創建一個顯示HTML內容的模態對話框。
window.showModelessDialog()方法用來創建一個顯示HTML內容的非模態對話框。
使用方法：
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])?
參數說明：
sURL--
必選參數，類型：字符串。用來指定對話框要顯示的文檔的URL。
vArguments--
可選參數，類型：變體。用來向對話框傳遞參數。傳遞的參數類型不限，包括數組等。對話框通過window.dialogArguments來取得傳遞進來的參數。
sFeatures--
可選參數，類型：字符串。用來描述對話框的外觀等信息，可以使用以下的一個或幾個，用分號“;”隔開。
1.dialogHeight :對話框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默認的單位是em，而ＩＥ５中是px，為方便其見，在定義modal方式的對話框時，用px做單位。
2.dialogWidth: 對話框寬度。
3.dialogLeft: 離屏幕左的距離。
4.dialogTop: 離屏幕上的距離。
5.center: {yes | no | 1 | 0 }：窗口是否居中，默認yes，但仍可以指定高度和寬度。
6.help: {yes | no | 1 | 0 }：是否顯示幫助按鈕，默認yes。
7.resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改變大小。默認no。
8.status: {yes | no | 1 | 0 } ［IE5+］：是否顯示狀態欄。默認為yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }：指明對話框是否顯示滾動條。默認為yes。
下面幾個屬性是用在HTA中的，在一般的網頁中一般不使用。
10.dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印預覽時對話框是否隱藏。默認為no。
11.edge:{ sunken | raised }：指明對話框的邊框樣式。默認為raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }：默認為no。
?
1.參數可以傳遞任何對象
?
要想對話框傳遞參數，是通過vArguments來進行傳遞的。類型不限制，對于字符串類型，最大為4096個字符。也可以傳遞對象，例如：
<script> var obj = new Object(); obj.name="51js"; window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px"); </script> <script> var obj = window.dialogArguments alert("您傳遞的參數為：" + obj.name) </script>?
2.通過window.returnValue向打開對話框的窗口返回信息，當然也可以是對象。
?
例如：
<script> str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px"); alert(str); </script><script> window.returnValue="http://www.51js.com"; </script>?
3、模態（modal）和非模態（modeless）的區別
?
所謂模態對話框，就是指除非采取有效的關閉手段，用戶的鼠標焦點或者輸入光標將一直停留在其上的對話 框。非模態對話框則不會強制此種特性，用戶可以在當前對話框以及其他窗口間進行切換。
?
本文介紹如何使用JavaScript語言來創建這兩種類型的對話 框、控制其大小和位置、改變其外觀以及在對話框間的數據傳遞。
本文的所有例程中，從層次上涉及到2個HTML頁面。我們把第一個頁面叫做caller頁面，第二個頁面叫做callee頁面。也就是說，在caller頁面執行代碼創建生成callee頁面。
創建模態和非模態對話框
首先，我們舉個例子來快速了解一下什么是模態與非模態。在caller.htm中，我們輸入以下代碼：
?
在 瀏覽器中打開caller.htm，點擊“創建模態對話框”按鈕，將會出現一個對話框窗口，其中的內容是callee.htm。你會看到，除了關閉這個新 窗口，無論怎樣我們也不能將其他的窗口設置為“當前活動”窗口，這個一直是活動狀態的窗口類型就是模態類型。關閉這個模態對話框，回到 caller.htm頁面，點擊“創建非模態對話框”，出現一個包含callee.htm頁面的對話框窗口。這回有所不同，鼠標可以轉移到其他地方使另外 的窗口成為“當前活動”狀態，這就是非模態的概念。?
4、控制對話框大小和位置
?
控 制對話框的大小和位置涉及到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')
?
5、改變對話框外觀
對 話框的外觀控制包括從窗口邊緣風格（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");?
?
6、實例
上面我們介紹了創建模態和非模態窗口的語法以及如何控制新窗口的大小、位置和外觀，接下來我們研究一下實際應用中更實用的功能：如何從caller頁面傳遞數據到callee頁面。
從caller頁面傳遞給callee頁面的數據分為3類：傳遞值、傳遞數組引用以及傳遞對象,它們都是通過showModalDialog()和showModelessDialog()的第2個參數實現的。
（一）傳遞值類型數據
在caller.htm頁面中輸入以下代碼：
?在瀏覽器中打開caller.htm，點擊任意一個按鈕，我們將首先看到如下的提示信息框：
?
?
?
然后才出現新窗口。這種情況下，callee.htm頁面中的window對象的屬性dialogArguments將對應于caller.htm頁面中的"打開了一個新模態窗口"或者"打開了一個新非模態窗口"。如果直接打開callee.htm，將會出現錯誤提示。
（二）傳遞數組引用類型數據
第一種值類型數據的傳遞中，在callee.htm頁面中只能讀取caller.htm頁面的傳遞數據。當需要對caller.htm頁面的傳遞內容進行修改時，就需使用到數組引用類型的傳遞方式。
首先，在caller.htm頁面中輸入以下代碼：
?
最后，在瀏覽器中打開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中輸入以下代碼：
?
在瀏覽器中打開caller.htm，點擊“顯示非模態對話框”按鈕，出現新對話框：
?
?
在對話框中輸入其他顏色名稱，點擊“Apply”按鈕后，執行callee.htm中的getInfoAndUpdate函數：
?
因 為在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()函數更新顯示信息。
可以看到，通過對象方式傳遞數據，功能很豐富強大，而且使用起來也不復雜。?
?
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的window.showModalDialog介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 查询设计
- 下一篇： Jscript中window.setIn