当模态窗口打开时如何防止正文滚动？-js教程-PHP中文网

当模态窗口打开时如何防止正文滚动？

Patricia Arquette

发布： 2024-10-19 18:05:30

原创

822 人浏览过

How to Prevent Body Scrolling When a Modal Window Is Open?

在 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中文网其他相关文章！