Bootstrap modal 使滚动条在关闭后消失

Posted 2023-03-08

【中文标题】Bootstrap modal 使滚动条在关闭后消失

【英文标题】：Bootstrap modal makes scrollbar disappear after closing

【发布时间】：2015-04-22 23:54:15

【问题描述】：

我在 *** 上阅读了很多关于此主题的解决方案/技巧，但它们似乎都不适合我。

我正在使用模式登录 Meteor（例如，使用 Facebook 登录服务）。并在登录成功时触发回调。

我把它放在我的回调中以关闭模式 - $('#modalSignIn').modal('toggle');

一切正常，除了关闭后，页面上没有滚动条。

我得到的一个解决方案来自here -

.modal-open 
    overflow: scroll;

这部分有效，因为即使模式关闭，我也有滚动条。但是，右侧似乎有大约 15px 的填充（前一个滚动条应该在的位置）。在重复此打开和关闭时，填充不断增加。

编辑：

这是我的导航模板 -

<template name="_navMenu">
    #if isLoggedIn
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">My Profile <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">My Profile</a></li>
            <li><a href="#">Edit Profile</a></li>
            <li class="divider"></li>
            <li><a href="#" id="logout-button">Logout</a></li>
          </ul>
        </li>
    else
        <li><a href="#" data-toggle="modal" data-target="#modalSignUp">SIGN UP</a></li>
        <li><a href="#" data-toggle="modal" data-target="#modalSignIn">LOG IN</a></li>
        <li><button class="btn btn-primary nav-button visible-xs-inline-block">Text Here</button></li>

        <!-- Modal -->
        <div class="modal fade" style="overflow-y: scroll;" id="modalSignIn" tabindex="-1" role="dialog" aria-labelledby="SignInLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="row">
                  <div class="col-xs-8 col-xs-offset-2">
                    > atFormModal state="signIn"
                  </div>
              </div>
            </div>
          </div>
        </div>
    /if
</template>

【问题讨论】：

你有小提琴或plunkr我们可以看看吗？

不，但让我试着做一个。我不确定我是否能够复制它，因为这发生在 Meteor 成功登录回调时。

我在某处读到 Modal on opening 添加了一些类到正文中。是否有可能在切换时不会将这些从身体中移除？我什至尝试了“隐藏”而不是“切换”，但结果相同。

【参考方案1】：

我遇到了同样的问题。 Bootstrap 在body 中添加modal-open 类，但在模态关闭时不会删除。 我解决了只是添加回调：

$('body').removeClass('modal-open');

【讨论】：

天啊！，在我的情况下，modal-open 类位于html 标签上:(。所以，我的代码$('html').removeClass('modal-open');

【参考方案2】：

你可以试试这个方法

$(document).on('hidden.bs.modal', '.modal', function () 
    $('.modal:visible').length && $(document.body).addClass('modal-open');
);

【讨论】：

谢谢，但这没有用。但是，我想在弄清楚这一点的同时，我意识到我的模态框位于 #if 语句中，这导致用户登录后它们被删除。

【参考方案3】：

将此添加到您的身体标签 style="overflow:auto;"

【参考方案4】：

 $('body').removeClass("modal-open");

//Bootstrap在body中添加modal-open类，但是modal关闭时不移除。

【参考方案5】：

通过将以下内容添加到正文 CSS 规则来解决滚动条问题。

我遇到了同样的问题，在阅读了上面的所有答案后，他们并没有解决我的问题，所以我决定思考并得出这样一个事实，即强制使用 CSS 规则将确保获得预期的结果。

body  padding-right: 0!important 

【参考方案6】：

这是为我做的：

$("body").css("overflow", "auto");

【参考方案7】：

我发现了问题，如果有人犯了同样的错误，我想发布它 - 我在 #if 语句中有模态框，这导致它们在用户登录后被删除。我只是将模态框从如果它现在工作正常 -

<template name="_navMenu">
    #if isLoggedIn
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">My Profile <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">My Profile</a></li>
            <li><a href="#">Edit Profile</a></li>
            <li class="divider"></li>
            <li><a href="#" id="logout-button">Logout</a></li>
          </ul>
        </li>
    else
        <li><a href="#">HOW IT WORKS</a></li>
        <li><a href="#" data-toggle="modal" data-target="#modalSignUp">SIGN UP</a></li>
        <li><a href="#" data-toggle="modal" data-target="#modalSignIn">LOG IN</a></li>
        <li><button class="btn btn-primary nav-button visible-xs-inline-block">Text Here</button></li>
    /if

    <!-- Modal -->
    <div class="modal fade" style="overflow-y: scroll;" id="modalSignIn" tabindex="-1" role="dialog" aria-labelledby="SignInLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="row">
              <div class="col-xs-8 col-xs-offset-2">
                > atFormModal state="signIn"
              </div>
          </div>
        </div>
      </div>
    </div>

</template>