使用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中我勾選Miscellaneous的Close icon和JS Components的Modals

在Select jQuery plugins中則勾選Modals

接著點選Customize and Download下載客制化後的Bootstrap。解壓縮後將bootstrap.min.css及bootstrap.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;即可解決此問題。