Bootstrap modal makes scrollbar disappear after closing

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>

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

Solution 2

you can try this fix

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

Solution 3

Add this to your body tag style="overflow:auto;"

Comments

[Ayrton Senna]

Thanks but that did not work. However, I think while figuring this out, I realized I had the modals were in an {{ #if }} statement which was causing them to be removed once the user is logged in.

[Nurkartiko]

OMG!, In my case the modal-open class is on the html tag :(. So, my code $('html').removeClass('modal-open');