Question

我在StackOverflow上阅读了很多关于这个主题的解决方案/黑客，但它们似乎都不适用于我。

我使用模态登录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>

Answer 1

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

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

Answer 2

您可以尝试此修复

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

Answer 3

将此添加到您的body标签的风格= “溢出：汽车;”

Answer 4

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

// Bootstrap在主体中添加modal-open类，但是在关闭模式时不会删除它。

Answer 5

通过将以下内容添加到您的身体CSS规则来解决滚动条问题。

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

body { padding-right: 0!important }

Answer 6

这是为我做的：

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

Answer 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>

Bootstrap模态使滚动条在关闭后消失

7 个答案: