feat(modal): add ability to change class on body

- Add support for `openedClass` to allow overriding the default modal class added & removed on the `body` element (`modal-open`)

Closes #2633
Closes #4132

src/modal/docs/readme.md

@@ -17,6 +17,7 @@ The `$modal` service has only one method: `open(options)` where available option
 * `windowClass` - additional CSS class(es) to be added to a modal window template
 * `windowTemplateUrl` - a path to a template overriding modal's window template
 * `size` - optional suffix of modal window class. The value used is appended to the `modal-` class, i.e. a value of `sm` gives `modal-sm`
+* `openedClass` - class added to the `body` element when the modal is opened. Defaults to `modal-open`
 
 Global defaults may be set for `$modal` via `$modalProvider.options`.
 

src/modal/modal.js

@@ -272,7 +272,7 @@ angular.module('ui.bootstrap.modal', [])
         openedWindows.remove(modalInstance);
 
         removeAfterAnimate(modalWindow.modalDomEl, modalWindow.modalScope, function() {
-          body.toggleClass(OPENED_MODAL_CLASS, openedWindows.length() > 0);
+          body.toggleClass(modalInstance.openedClass || OPENED_MODAL_CLASS, openedWindows.length() > 0);
         });
         checkRemoveBackdrop();
 
@@ -385,7 +385,8 @@ angular.module('ui.bootstrap.modal', [])
           renderDeferred: modal.renderDeferred,
           modalScope: modal.scope,
           backdrop: modal.backdrop,
-          keyboard: modal.keyboard
+          keyboard: modal.keyboard,
+          openedClass: modal.openedClass
         });
 
         var body = $document.find('body').eq(0),
@@ -419,7 +420,7 @@ angular.module('ui.bootstrap.modal', [])
         openedWindows.top().value.modalDomEl = modalDomEl;
         openedWindows.top().value.modalOpener = modalOpener;
         body.append(modalDomEl);
-        body.addClass(OPENED_MODAL_CLASS);
+        body.addClass(modal.openedClass || OPENED_MODAL_CLASS);
         $modalStack.clearFocusListCache();
       };
 
@@ -621,7 +622,8 @@ angular.module('ui.bootstrap.modal', [])
                 backdropClass: modalOptions.backdropClass,
                 windowClass: modalOptions.windowClass,
                 windowTemplateUrl: modalOptions.windowTemplateUrl,
-                size: modalOptions.size
+                size: modalOptions.size,
+                openedClass: modalOptions.openedClass
               });
 
             }, function resolveError(reason) {

src/modal/test/modal.spec.js

@@ -767,6 +767,29 @@ describe('$modal', function () {
 
     });
 
+    describe('openedClass', function () {
+
+      it('should add the modal-open class to the body element by default', function () {
+        open({
+          template: '<div>dummy modal</div>'
+        });
+
+        expect($document.find('body')).toHaveClass('modal-open');
+      });
+
+      it('should add the custom class to the body element', function () {
+        open({
+          template: '<div>dummy modal</div>',
+          openedClass: 'foo'
+        });
+
+        var body = $document.find('body');
+
+        expect(body).toHaveClass('foo');
+        expect(body).not.toHaveClass('modal-open');
+      });
+    });
+
   });
 
   describe('multiple modals', function () {