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。