當模態視窗開啟時如何防止正文滾動？

在Modal 打開時防止主體滾動

問題陳述：

使用http://twitter.github.com/bootstrap 中的Modal 時，當使用滑鼠滾輪時，主體繼續滾動。我們如何防止這種情況發生？

嘗試的解決方案：

嘗試使用JavaScript 來防止使用$(window).scroll 和$(window).live('scroll') 進行滾動，但沒有成功.

Bootstrap 支援：

Bootstrap 在顯示模態對話框時向主體引入了modal-open 類別。該類別可用於防止透過 CSS 進行滾動。

<code class="css">body.modal-open {
    overflow: hidden;
}</code>

當前情況（2013 年2 月8 日更新）：

此解決方案不再適用於Twitter Bootstrap v. 2.3.0，因為模態開放類別未加入主體。

目前解決方法：

當模態顯示和隱藏時，分別使用以下方法向主體新增和刪除模態開放類別以下JavaScript：

<code class="javascript">$("#myModal").on("show", function() {
    $("body").addClass("modal-open");
}).on("hidden", function() {
    $("body").removeClass("modal-open");
});</code>

未來更新（2013 年3 月11 日）：

模態開放類預計將在Bootstrap 3.0 中返回，其明確目的是防止滾動：

<code class="css">/* Enable Body overflow hidden */
.modal {
    ...
    /* support for transition.* to transition .bs-modal-backdrop and .bs-modal-content */
    -webkit-transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
    /* modal container size */
    width: 560px;
    margin: 20px auto;
    padding: 0;
    border: 0;
    border-radius: 6px;
    /* background color; best with border-radius for dialog box effect */
    /* fallback for IE7-8 */
    background-color: #ffffff;
    /* IE9+ */
    background-clip: padding-box;
    /* fade in effect; (speed/timing via CSS animation) */
    opacity: 1;
 }
/* body overflow hidden */
body.modal-open {
    overflow: hidden;
}</code>

以上是當模態視窗開啟時如何防止正文滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！