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>
function setname(res){
document.getElementByIdx_x("name").value=res;
}
function selectTp(){
 //把父視窗的setname函數傳給子視窗window.showModalDialog('child.html',setname,'dialogWitdh:300px;dialogHeight:300px;center:yes;');
}
</script>
<input type="button" value="提交" onclick="selectTp()"/>

<input type="text" id="name" name='name'/>

child.html

 <SCRIPT LANGUAGE="JavaScript">
  <!--
 function setName(){
  var win="";
  if(window.dialogArguments!=null)
  {
//子視窗擷取父視窗的setname函數，並操作賦值
 win=window.dialogArguments;
 win('Jone');
  }

  this.close();

  }

  //-->
  </SCRIPT>
  <input type="button" value="給父視窗賦值" onclick="setName()"/>