DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js showModalDialog彈出窗口實例詳解
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 }
 [IE5+]:是否可被改變大小。默認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()"/>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved