或許有些人對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檔不存在的也成,絕吧?)即可克服。


Comments

# by alan

thx ... 解決了我目前的困擾

Post a comment


61 - 37 =