首頁 > 開發者 > JavaScript
控制非模態彈出框(showModelessDialog)唯一且隨父頁面關閉，ios模態彈出
網站開發中，常常會遇到需要彈出表單的情況，一般彈出框有模態和非模態兩種，如下：
模態：window.showModalDialog()
非模態：window.showModelessDialog()
另外還有window.open 方法，以及通過div來類比彈出框效果的形式。
window.open請自行百度，瞭解不深；div類比的方式不適用與，彈出框中某些組件與父頁面組件不相容的情況，如筆者所在項目，父頁面中的jquery與整個網站js架構不相容（當然不是簡單的可以通過替換$關鍵字來解決）。所以筆者選擇了window.showModelessDialog()方法。但是使用該方法，會遇到可以開啟多個彈出框以及父頁面關閉後不同步關閉的問題。解決該問題的關鍵是，知道window.showModelessDialog()方法會返回開啟的頁面對象，只需要緩衝這個頁面對象，再次開啟時判定該對象的狀態就行。
代碼如下：
1 if(!modelessDialog|| modelessDialog.closed){ 2 modelessDialog = window.showModelessDialog(
這樣就能防止開啟多個彈出框。
而實現子頁面隨父頁面同步關閉功能，只需要在父頁面的onUnload中關閉該子頁面就行。
代碼如下：
1 //父頁面： 2 <body> 3 4 //父頁面關閉時同時關閉右擊尋找畫面 5 function modelessDialog_Close(){ 6 if(modelessDialog&&!modelessDialog.closed){ 7 modelessDialog.close(); 8 modelessDialog = null; 9 }10 }
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
