Javascript 引导模式使滚动条在关闭后消失

我在StackOverflow上读了很多关于这个主题的解决方案/技巧，但似乎没有一个适合我

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

我把这个放在我的回拨中以关闭模态-

$（'modalSignIn'）。模态（'toggle'）

一切正常，只是关闭后，页面上没有滚动条

我得到的一个解决方案是：

这在一定程度上起作用，因为即使在模式关闭时，我也有滚动条。然而，右边似乎有大约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>


{{{如果是isLoggedIn}








{{else}


此处文本
{{>atFormModal state=“signIn”}
{{/if}
您可以尝试此修复

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

我发现了这个问题，并想在有人犯同样的错误时发布它——我在
{{if}}
语句中使用了modals，这导致用户登录后将其删除。我刚把情态动词从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>


{{{如果是isLoggedIn}








{{else}



此处文本
{{/if}
{{>atFormModal state=“signIn”}
我也有同样的问题。
引导程序在
主体中添加
模态打开
类，但在模态关闭时不删除。
我解决了添加回调的问题：

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

将此添加到您的body标签
style=“溢出：自动；”

//引导在正文中添加模态打开类，但在模态关闭时它不会删除。
通过将以下内容添加到正文CSS规则来解决滚动条问题

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

body { padding-right: 0!important }

这是为了我：

$（“body”）.css（“溢出”、“自动”）
你有小提琴或弹琴吗？没有，但让我试着做一把。我不确定我是否能够复制它，因为这是在Meteor成功登录回调时发生的。我在某个地方读到，打开Modal会在正文中添加一些类。是否可能在切换时，它不会将这些从身体上移除？我甚至尝试了“隐藏”而不是“切换”，但结果是一样的。谢谢，但那不起作用。然而，我想当我弄明白这一点的时候，我意识到我有一个{{{if}}语句中的情态动词，这会导致用户登录后将其删除。OMG！，在我的例子中，
modal-open
类位于
html
标记上：（.因此，我的代码
$（'html'）。removeClass（'modal-open'）；
 $('body').removeClass("modal-open");

body { padding-right: 0!important }