Bootstrap模态使滚动条在关闭后消失 [英] Bootstrap modal makes scrollbar disappear after closing

问题描述

我在StackOverflow上阅读了很多有关此主题的解决方案/技巧，但似乎没有一个对我有用.

I read a lot of solutions / hacks on this topic on StackOverflow but none of them seem to work for me.

我正在使用模式登录Meteor(例如，使用Facebook登录服务).登录成功后会触发回调.

I am using a modal for logging in in Meteor (eg. using Facebook login service). And a callback is triggered when the login is successful.

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

I put this in my callback to close the modal - $('#modalSignIn').modal('toggle');

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

Everything works fine except that after close, there is no scrollbar on the page.

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

One solution I got was from here -

.modal-open {
    overflow: scroll;
}

这部分起作用是因为即使模式关闭，我也具有滚动条.但是，右侧似乎有大约15px的填充(上一个滚动条应位于该位置).在重复此打开和关闭操作时，填充会不断累加.

This works partially because I have the scrollbar even when the modal closes. However, there seems to be about 15px padding on the right (where the previous scrollbar should be.) On repeating this opening and closing, the padding keeps adding up.

这是我的Nav模板-

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

推荐答案

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

I had the same problem. Bootstrap add modal-open class in the body, but does not remove when the modal is closed. I solved just adding in callback:

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

这篇关于Bootstrap模态使滚动条在关闭后消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！