JavaScript 模態窗口的使用及傳值:window.showModalDialog 和window.showModalessDialog

JavaScript 的window 對象提供的兩個方法,用於新建一個(非)模態窗口,這是一個很樸素的窗口,雖然難看但卻相當方便實用。方便之處在於往打開的新窗口中傳數據,且在關閉了窗口後,原來的窗口也能輕易地接收到返回的數據。

window.showModalDialog 和window.showModalessDialog 的區別僅僅是前者打開的是模態窗口,而後者打開的是非模態窗口,兩個函數的用法是一模一樣的(模態指它始終處在最前端,在關閉它之前無法對父窗口進行操作)。

window.showModalDialog 和window.showModalessDialog 的調用格式(具體使用方法請參考js手冊):

vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

模態窗口的使用步驟一般是這樣的:

1. 在父頁面中調用window.showModalDialog 打開模態窗口,調用的時候可以傳遞數據,這個方法會有一個返回值,待會兒會用上;

2. 在打開的子窗口中可通過window.dialogArguments 來獲取父頁面傳遞的數據,進行了相關的操作之後,在關閉窗口之前把要返回給父頁面的值賦給window.returnValue 即可,另外關閉窗口也可調用window.close() 實現;

3. 在父頁面中window.showModalDialog 的返回值便是子窗口返回的數據。

注:以上窗口間的傳值的類型是混合型的,即任意類型(包括數組和對象等)。

這裏舉一個例子,在一個頁面中收集用戶名,然後打開新窗口,在新窗口中顯示用戶名並要求選擇一個愛好,然後提交將窗口關閉,最後在原來的頁面中顯示該用戶的愛好,代碼比較簡單,相信大家都能看懂~

父頁面:

模態窗口 modal_dialog.html :

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章