KB-Modal Dialog Mini FAQ

或許有些人對Modal Dialog不是很熟悉，基本上它就是由某個網頁另外開啟的一個網頁，但新開啟的網頁會強制取得焦點，直到該視窗關閉後才歸還，它特別適用於彈出另一個網頁強迫使用者檢視、選擇或輸入後再返回的場合。要套用這種強制使用者選擇、操作後再返回的模式，可以透過window.showModalDialog(sURL [, vArguments] [, sFeatures])函數，以Modal Dialog方式開啟指定的網頁即可。

Modal Dialog在網頁UI設計實務上還挺常見的，例如: 寫信時叫出連絡人清單視窗供使用者挑選收信人、在清單中選取一筆資料編輯後返回清單…等等。使用Modal Dialog可以避免另開的新視窗跑到背景、被最小化後不知去向的混淆。

不過，Modal Dialog是個很有個性的視窗，與一般的Window Object的行為不太相同，以下是一些經驗談:

Q1. Modal Dialog要怎麼控制大小位置?
Ans: 利用dialogWidth, dialogHeight, dialogTop, dialogLeft屬性

Q2. 如何偵測網頁是否開在Modal Dialog中?
Ans: if (widnow.dialogWidth) { alert("I am inside modal dialog!"); }

Q3. 網頁叫出Modal Dialog後，可以對其中網頁DOM進行操控嗎?
Ans: 母網頁跟Modal Dialog間沒有直接控制的管道，只能透過呼叫時傳遞參數過去(我習慣將整個Window Object傳過去，這樣就可以在Modal Dialog中存取完整的母網頁HTML DOM)。但無論如何，母網頁永遠只能扮演被動的角色，存取操作的主導權在Modal Dialog身上，這符合由Modal Dialog取得焦點，並主導操作的原始精神。

Q4. 放在Modal Dialog中的ASPX/ASP，在按下按鈕(Submit/PostBack)或點選連結時會另外開啟新視窗，要如何解決?
Ans: 可加上<base target="_self">宣告，或用Iframe嵌入ASPX網頁(後者實在有點小題大做，當我沒說好了)

Q5. Modal Dialog有什麼不方便的限制嗎?
Ans: 罄竹難書~~~
  1) 不支援history.back()或history.go()
  2) 沒有地址列(Address Bar)及上一頁/下一頁的按鈕列(Standard Buttons)
  3) 不能使用右鍵叫出IE的Context Menu，所以不能列印、不能選取/複製、不能切換語系、不能Refresh...
  4) Modal Dialog對於Cache的堅持讓人敬佩，明明網頁都設定Response.Expires=-1或指定No-Cache了，Modal Dialog卻還是有偶爾會去讀到Cache中的舊資料。因此我常會在開啟URL加上亂數加以預防，例如: showModalDialog("a.aspx?rnd=" + Math.random(),window);
  5) 我有發生過在Postback前後，同一網頁的Body Margin產生位移的怪事，解決方法是隨便為網頁套用CSS(即使該CSS檔不存在的也成，絕吧?)即可克服。