Prevent scrolling while Modal Bootstrap is open

Asked

Viewed 408 times

1

How to avoid scrolling while Bootstrap’s Modal Dialog is open?

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button id="fechar" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">Fechar</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>
twitter-bootstrap modal

  • You want Modal not to scroll next to the page or the Page not to scroll at all?

  • That the page does not scroll at all.

1 answer

-1

When the modal is displayed, the bootstrap adds the class modal-open automatically, and removes when it is hidden. Putting this snippet into your css:

body.modal-open { overflow: Hidden; }

OBS: Not working properly on Safari and some older versions of Internet Explorer.

Browser other questions tagged twitter-bootstrap modal

You are not signed in. Login or sign up in order to post.