stackable modals and scrollbars

[cyberdemon8]

Hi, i found this solution for fixing scrollbar "focus" in standard bootstrap js: multiple-modals-overlay

for angular-strap modify this line of modal.js #L258 "fix" the problem

from

bodyElement.removeClass(options.prefixClass + '-open');

to

if ($('.modal:visible').length <= 0) {
    bodyElement.removeClass(options.prefixClass + '-open');
}

[kaeldric]

Hello, I had your same problem, but I didn't want to change the source code, so I solved it like this:

var app = angular.module('myApp', []);

app.run(['$rootScope', '$window', '$timeout', function($rootScope, $window, $timeout) {
  $rootScope.$on('modal.hide', function($evt, modalData) {
    var bodyElement = angular.element($window.document.body);

    if (angular.element('.modal:visible').length > 0) {
      $timeout(function() {
        bodyElement.addClass(modalData.$options.prefixClass + '-open');
      }, 0);
    }
  });
}]);

Works with prefixClass, but not with prefixEvent option.

[DaleWebb]

Do you think this would be useful as a native option (or default) of Angular-Strap? What was the problem you encountered that required you to do this?

[cyberdemon8]

Problem:

1. open a modal exceeds the browser height
2. open a modal above the other
3. close last modal
4. scroll acts on the body rather than on the first modal because the class 'modal-open' is removed from body

Fix: My first comment :smile:

Yes, I think this would be useful as a native default of Angular-Strap because doesn't break anything and fixes a problem

[DaleWebb]

Ah okay! So this is actually a bug, as you cannot scroll the modal.

Do you think you could implement this fix?

[pablomarti]

Hey, I'm having a similar bug, but just with one modal; if the height of the modal exceeds the browser height the scroll doesn't work. Is this related? or should I check something else?

[greatghoul]

if ($('.modal:visible').length <= 0) {
    bodyElement.removeClass(options.prefixClass + '-open');
}

I think this is correct, but final implementation is

findElement('.modal').length <= 0

this will fail while there are invisible .modal elements in the page.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.