May 13, 2013

使用Bootstrap實作modal window

jQuery BlockUI在window.showModalDialog失效問題一文提到了我以javascript內建的showModalDialog搭配jQuery BlockUI實作modal window。實作modal window的方式有很多種,市面上更是有很多的套件可以支援這種效果,如jQuery UI

雖然javascript內建的showModalDialog搭配jQuery BlockUI順利地實作出greyed-out modal window,Product Manager在iPad中瀏覽時卻發現modal window無法正常顯示,而且這似乎是個已知問題,所以決定改以Bootstrap來實作greyed-out modal window。

安裝Bootstrap可以透過nuget來完成,不過因為我的開發環境是Visual Studio 2008且我只需要Modal的功能,所以手動下載。

瀏覽http://twitter.github.io/bootstrap/customize.html,此頁面允許我們下載在Bootstrap中所需的功能。因為我只需要Modal,所以在Choose components中我勾選MiscellaneousClose iconJS ComponentsModals


Select jQuery plugins中則勾選Modals

接著點選Customize and Download下載客制化後的Bootstrap。解壓縮後將bootstrap.min.cssbootstrap.min.js加入專案即可,不過建議加入前將檔名修改成較為直覺的檔名如bootstrap-modal.min.css或bootstrap-modal.min.js。

有一點要注意的是,當我加入bootstrap.min.css後,網頁版面整個跑掉了,檢查了一下bootstrap.min.css原始碼,發現有幾個與Modal較無關係的class,將它們移除後版面即恢復正常(僅留下.modal開頭的class)。


在Bootstrap Modal中,資料都是顯示在<div class="modal-body"></div>中,因為要顯示的資料是一份aspx且內含使用者需要輸入的表單資料,所以我以jQuery在載入Bootstrap Modal時動態載入一個內含此aspx的iframe。

$('.modal-body').html('<iframe width="100%" height="520px" frameborder="0" scrolling="no" allowtransparency="true" src="OnlineEnquiry.aspx"></iframe>');
$('#modal').modal({ backdrop: 'static' });

backdrop屬性設定為static是為了讓瀏覽者強制回應greyed-out modal window。到這個步驟,Bootstrap Modal已可成功地顯示表單頁面。

補充 (May 16, 2013)
在iPad上瀏覽Bootstrap Modal發現,iframe內的表單內容太長時,無法使用捲軸將Modal內的頁面往下拉,參考Modal overflow does not scroll on iOS,在Bootstrap樣式表的modal-body類別中加入-webkit-overflow-scrolling: touch;即可解決此問題。

No comments: