js showModalDialog彈出視窗實例詳解_javascript技巧

showModalDialog:模式視窗, 一種很特別的視窗,當它開啟時,後面的父視窗的活動會停止,除非當前的模式子視窗關閉了,才能操作父視窗.在做網頁Ajax開發時,我們應該有時會用到它來實現表單的填寫, 或做類似網上答題的窗口. 它的特點是,傳參很方便也很強大,可直接調用父視窗的變數與方法.

使用方法： 
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) 

參數說明： 
sURL-- 
必選參數，類型：字串。用來指定對話方塊要顯示的文件的URL。 

vArguments-- 
可選參數，類型：變體。用來向對話框傳遞參數。傳遞的參數類型不限，包括陣列等。對話框透過window.dialogArguments來取得傳遞進來的參數。 

sFeatures-- 
可選參數，類型：字串。用來描述對話框的外觀等訊息，可以使用以下的一個或幾個，用分號「;」隔開。 

1.dialogHeight :
  對話框高度，不小於100px，IE4中dialogHeight和dialogWidth預設的單位是em，而IE5是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。

FOR example：
parent.html

複製程式碼

複製程式碼

複製程式碼



複製程式碼

複製程式碼

複製程式碼



複製程式碼



複製程式碼

複製碼程式碼如下:

<script><BR>function setname(res){<BR>document.getElementByIdx_x("name").value=res;<BR>}</script>

function selectTp( ){ //把父視窗的setname函數傳給子視窗window.showModalDialog('child.html',setname,'dialogWitdh:300px;dialogHeight:300px;center:yes;');} child.html