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

Question

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

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.

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

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.

EDIT:

Here is my Nav template -

<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

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');

Answer 2

you can try this fix

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

Answer 3

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

Answer 4

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

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

Answer 5

Solve the scroll bar issue by adding the following to your body CSS rules.

I had this same issue and after reading all the answers above they did not solve my issue so I decide to think and I arrive at the fact that forcing the CSS rule will ensure the desired result.

body { padding-right: 0!important }

Answer 6

这为我做到了：

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

Answer 7

Inspect your body and html tags, you'll find one of them gained a style of overflow:hidden

just add the style to your css file:

body {
overflow: auto !important;
}

or

html {
overflow: auto !important;
}

I noticed that it adds also a padding-right style, so you might want to remove that as well

Answer 8

I found the problem and wanted to post it if anyone makes the same mistake - I had the modals in an {{#if }} statement which was causing them to be removed once the user logs in. I just took the modals out of the if and it works fine now -

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