Bootstrap 3 modal creates scrollbar when opened

问题

I'm trying to use Bootstrap for the first time and am having an issue with modal dialogs. Using the example code on this page, when the modal is opened a scrollbar appears, which also shifts the content on the page to the left.

Code:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JSFIDDLE: http://jsfiddle.net/WqRBP/

A lot of sites I'm looking at use Bootstrap and they don't have this issue, so is there some sort of easy fix for the problem?

EDIT: The scrollbar appears in Chrome and IE, I haven't tested in other browsers.

Here's what I'm seeing in JSFIDDLE:

回答1:

The problem occurred because Twitter Bootstrap always shift the page 15px to the left when a modal is opened. You can solve this by moving the page back to the right - margin-right: -15px. This can be done by using events show.bs.modal and hidden.bs.modal provided by Bootstrap's modal.

$('#myModal').bind('hidden.bs.modal', function () {
  $("html").css("margin-right", "0px");
});
$('#myModal').bind('show.bs.modal', function () {
  $("html").css("margin-right", "-15px");
});

jsFiddle

---

FYI:

show.bs.modal: This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

Reference

回答2:

LVarayut's answer sent me in the right direction and what I ended up using is this:

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    margin-right: 0;
}

.modal {
    overflow-y: auto;
}

回答3:

It is so simple, just add to your css:

body.modal-open{overflow:hidden!important;}

/*Optional:*/
.modal-open, .modal{padding-right:0!important}

回答4:

This is my solution:

.modal {
 margin-right: -15px;
}`

and add this also

body.modal-open {
    margin-right: 0 !important;
}

Hope this help you.

回答5:

This is my solution

#myModal{
    overflow:hidden;
}
body {
    overflow-y: scroll !important;
} 

With this,you will force your page to have a scroll bar.

回答6:

This issue is solved in Bootstrap version 3.2.0, which was released on 23/06/2014.

Thanks to @roadsunknown for the link (in the question comments).

回答7:

This work for me. It should work fine

body.modal-open { 
  padding-right: 0 !important;
  overflow-y: scroll;
}

回答8:

Try with following css :

.modal{
    overflow:auto;
}

I already solved my problem by this way.

回答9:

this did a trick for me

$('html').bind('hidden.bs.modal', function () {
   console.log('hidden');
   $("html").css("margin-right", "0px");
});

$('html').bind('hide.bs.modal', function () {
   console.log('hiding');
   $("html").css("margin-right", "-15px");
});

$('html').bind('show.bs.modal', function () {
   console.log('shown');
   $("html").css("margin-right", "-15px");
});

回答10:

In this case you can overwrite bootstrap main css using your own css cause sometime may effect other. so this is simple code which work

body.modal-open .modal {
    margin-right: -15px !important;
}

body.modal-open {
    margin-right: 0 !important;
} 

if you want to change main bootstrap css then update this

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    margin-right: 0 !important;
}

回答11:

Try This

  .modal-open {
         overflow-y: auto
     }

回答12:

In my case there were my own styles that caused the problem:

html {
    overflow-y: scroll;
}

You may change html to body so there is only one scrollbar:

body {
    overflow-y: scroll;
}

回答13:

Its mainly due to the CDN used ...Remove the CDN https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" from your page and the problem is solved..I had done it.

来源：https://stackoverflow.com/questions/20829332/bootstrap-3-modal-creates-scrollbar-when-opened