May 12, 2013

jQuery BlockUI在window.showModalDialog失效問題

最近在幫忙公司調整官網UI,product manager希望能有個來信詢問的功能,讓瀏灠者按下按鈕後出現一個modal window並填寫相關資料。想有個modal window很簡單,用javascript內建的showModalDialog很快就可以辦的到。
window.showModalDialog('OnlineEnquiry.aspx', '', 'dialogHeight=525px;dialogWidth=450px;scroll=no');
demo後,product manager又希望在modal window開啟時可以將背景grey out。這部份也不是個難題,可以交由jquery BlockUI plugin來完成。
$.blockUI({ message: '' });
window.showModalDialog('OnlineEnquiry.aspx', '', 'dialogHeight=525px;dialogWidth=450px;scroll=no');
$.unblockUI();

測試一下。結果在按下按鈕後BlockUI並沒有出現,反而是在關閉modal window後BlockUI才淡入又隨即淡出。檢查後發現原來是BlockUI淡入的速度跑的比modal window慢,所以在按下按鈕後,modal window先開啟了,隨即讓畫面需強制回應,關掉後才繼續淡入的效果,接著再淡出。

由於我不需要淡入的效果,透過屬性fadeIn設為0將淡入的效果關閉。
$.blockUI({ message: '', fadeIn: 0 });
window.showModalDialog('OnlineEnquiry.aspx', '', 'dialogHeight=525px;dialogWidth=450px;scroll=no');
$.unblockUI();
再次開啟modal window可以看到背景已先grey out。

No comments: