Angularstrap Modal hide browser vertical scrollbar

I am testing an angular strap modal and something unwanted. In a large document, while modal visibility, the browser scroll bar disappears. Then, when you close the modal, the browser scroll bar is displayed again and the document falls off a bit.

I've been looking at developer tools for an hour but I can't seem to find the reason.

It gets annoying when the document crashes.

How can I disable invisible scrollbar?


<button data-animation="am-fade-and-scale" bs-modal="modal">
  Open Modal



var app = angular.module('Test', ['ngAnimate', 'mgcrea.ngStrap']);

    $scope.modal = {
      "title" : "ModalTitle",
      "content" : "Modal content"

TEST ON Windows 8.1

      Chrome 36, Firefox 31, Opera 24 - Same results.
      Safari 5.1.7 - Worst results, the overlayer still visible.



source to share

2 answers

The modal overflow is set to hidden.

You can install body overflow on auto to fix the problem.

ie <body ng-controller="ModalCtrl" style="overflow: auto">

Working demo



angular-modal-service adds "modal-open" class to your body tag when modal page is opened. It also adds padding-right: 15px to the body tag.

My solution for this is as follows. Add this to your css and the page won't change anymore during modal open / modal close.

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




All Articles