首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 17:05:01
原創
1031 人瀏覽過

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><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   
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板