feat(modal): add modal-open class to body on modal open

Closes #1254

Author: pkozlowski-opensource

misc/test-lib/helpers.js

@@ -4,7 +4,7 @@ beforeEach(function() {
   this.addMatchers({
     toHaveClass: function(cls) {
       this.message = function() {
-        return "Expected '" + angular.mock.dump(this.actual) + "' to have class '" + cls + "'.";
+        return "Expected '" + this.actual + "'" + (this.isNot ? ' not ' : ' ') + "to have class '" + cls + "'.";
       };
 
       return this.actual.hasClass(cls);

src/modal/modal.js

@@ -107,6 +107,8 @@ angular.module('ui.bootstrap.modal', [])
   .factory('$modalStack', ['$document', '$compile', '$rootScope', '$$stackedMap',
     function ($document, $compile, $rootScope, $$stackedMap) {
 
+      var OPENED_MODAL_CLASS = 'modal-open';
+
       var backdropjqLiteEl, backdropDomEl;
       var backdropScope = $rootScope.$new(true);
       var openedWindows = $$stackedMap.createNew();
@@ -129,13 +131,15 @@ angular.module('ui.bootstrap.modal', [])
 
       function removeModalWindow(modalInstance) {
 
+        var body = $document.find('body').eq(0);
         var modalWindow = openedWindows.get(modalInstance).value;
 
         //clean up the stack
         openedWindows.remove(modalInstance);
 
         //remove window DOM element
         modalWindow.modalDomEl.remove();
+        body.toggleClass(OPENED_MODAL_CLASS, openedWindows.length() > 0);
 
         //remove backdrop if no longer needed
         if (backdropDomEl && backdropIndex() == -1) {
@@ -185,7 +189,7 @@ angular.module('ui.bootstrap.modal', [])
         var modalDomEl = $compile(angularDomEl)(modal.scope);
         openedWindows.top().value.modalDomEl = modalDomEl;
         body.append(modalDomEl);
-       
+        body.addClass(OPENED_MODAL_CLASS);
       };
 
       $modalStack.close = function (modalInstance, result) {

src/modal/test/modal.spec.js

@@ -88,6 +88,7 @@ describe('$modal', function () {
     var body = $document.find('body');
     body.find('div.modal').remove();
     body.find('div.modal-backdrop').remove();
+    body.removeClass('modal-open');
   });
 
   function open(modalOptions) {
@@ -435,5 +436,23 @@ describe('$modal', function () {
 
       expect($document).toHaveBackdrop();
     });
+
+    it('should add "modal-open" class when a modal gets opened', function () {
+
+      var body = $document.find('body');
+      expect(body).not.toHaveClass('modal-open');
+
+      var modal1 = open({template: '<div>Content1</div>'});
+      expect(body).toHaveClass('modal-open');
+
+      var modal2 = open({template: '<div>Content1</div>'});
+      expect(body).toHaveClass('modal-open');
+
+      dismiss(modal1);
+      expect(body).toHaveClass('modal-open');
+
+      dismiss(modal2);
+      expect(body).not.toHaveClass('modal-open');
+    });
   });
 });