feat(modal): Adds defaultContainer to $modalProvider

Author: Lalem001

Diff for: src/modal/modal.js

@@ -215,22 +215,22 @@ angular.module('ui.bootstrap.modal', [])
 
       function removeModalWindow(modalInstance, elementToReceiveFocus) {
 
-        var body = $document.find('body').eq(0);
         var modalWindow = openedWindows.get(modalInstance).value;
+        var container = modalWindow.container;
 
         //clean up the stack
         openedWindows.remove(modalInstance);
 
         removeAfterAnimate(modalWindow.modalDomEl, modalWindow.modalScope, function() {
-          body.toggleClass(OPENED_MODAL_CLASS, openedWindows.length() > 0);
+          container.toggleClass(OPENED_MODAL_CLASS, openedWindows.length() > 0);
           checkRemoveBackdrop();
         });
 
-        //move focus to specified element if available, or else to body
+        //move focus to specified element if available, or else to modal container
         if (elementToReceiveFocus && elementToReceiveFocus.focus) {
           elementToReceiveFocus.focus();
         } else {
-          body.focus();
+          container.focus();
         }
       }
 
@@ -303,10 +303,11 @@ angular.module('ui.bootstrap.modal', [])
           renderDeferred: modal.renderDeferred,
           modalScope: modal.scope,
           backdrop: modal.backdrop,
-          keyboard: modal.keyboard
+          keyboard: modal.keyboard,
+          container: modal.container
         });
 
-        var body = $document.find('body').eq(0),
+        var container = modal.container,
             currBackdropIndex = backdropIndex();
 
         if (currBackdropIndex >= 0 && !backdropDomEl) {
@@ -318,7 +319,7 @@ angular.module('ui.bootstrap.modal', [])
             angularBackgroundDomEl.attr('modal-animation', 'true');
           }
           backdropDomEl = $compile(angularBackgroundDomEl)(backdropScope);
-          body.append(backdropDomEl);
+          container.append(backdropDomEl);
         }
 
         var angularDomEl = angular.element('<div modal-window="modal-window"></div>');
@@ -336,8 +337,8 @@ angular.module('ui.bootstrap.modal', [])
         var modalDomEl = $compile(angularDomEl)(modal.scope);
         openedWindows.top().value.modalDomEl = modalDomEl;
         openedWindows.top().value.modalOpener = modalOpener;
-        body.append(modalDomEl);
-        body.addClass(OPENED_MODAL_CLASS);
+        container.append(modalDomEl);
+        container.addClass(OPENED_MODAL_CLASS);
       };
 
       function broadcastClosing(modalWindow, resultOrReason, closing) {
@@ -393,9 +394,9 @@ angular.module('ui.bootstrap.modal', [])
         backdrop: true, //can also be false or 'static'
         keyboard: true
       },
+      defaultContainer: angular.element(document).find('body').eq(0),
       $get: ['$injector', '$rootScope', '$q', '$templateRequest', '$controller', '$modalStack',
         function ($injector, $rootScope, $q, $templateRequest, $controller, $modalStack) {
-
           var $modal = {};
 
           function getTemplatePromise(options) {
@@ -483,6 +484,7 @@ angular.module('ui.bootstrap.modal', [])
                 backdropClass: modalOptions.backdropClass,
                 windowClass: modalOptions.windowClass,
                 windowTemplateUrl: modalOptions.windowTemplateUrl,
+                container: $modalProvider.defaultContainer,
                 size: modalOptions.size
               });
 

Diff for: src/modal/test/modal.spec.js

@@ -75,9 +75,11 @@ describe('$modal', function () {
       toHaveModalOpenWithContent: function(util, customEqualityTesters) {
         return {
           compare: function(actual, content, selector) {
-            var contentToCompare, modalDomEls = actual.find('body > div.modal > div.modal-dialog > div.modal-content');
+            var container = (actual === $document) ? actual.find('body') : actual;
 
-            contentToCompare = selector ? modalDomEls.find(selector) : modalDomEls;
+            var modalDomEls = container.find('div.modal > div.modal-dialog > div.modal-content');
+
+            var contentToCompare = selector ? modalDomEls.find(selector) : modalDomEls;
 
             var result = {
               pass: modalDomEls.css('display') === 'block' && contentToCompare.html() === content
@@ -96,7 +98,9 @@ describe('$modal', function () {
       toHaveModalsOpen: function(util, customEqualityTesters) {
         return {
           compare: function(actual, expected) {
-            var modalDomEls = actual.find('body > div.modal');
+            var container = (actual === $document) ? actual.find('body') : actual;
+
+            var modalDomEls = container.find('div.modal');
 
             var result = {
               pass: util.equals(modalDomEls.length, expected, customEqualityTesters)
@@ -115,7 +119,9 @@ describe('$modal', function () {
       toHaveBackdrop: function(util, customEqualityTesters) {
         return {
           compare: function(actual, expected) {
-            var backdropDomEls = actual.find('body > div.modal-backdrop');
+            var container = (actual === $document) ? actual.find('body') : actual;
+
+            var backdropDomEls = container.find('div.modal-backdrop');
 
             var result = {
               pass: util.equals(backdropDomEls.length, 1, customEqualityTesters)
@@ -369,6 +375,30 @@ describe('$modal', function () {
     });
   });
 
+  describe('defaultContainer can be changed in a provider', function () {
+    it('should allow overriding defaultContainer in a provider', function () {
+      var container = $modalProvider.defaultContainer = angular.element('<div>');
+
+      var modal = open({template: '<div>Content</div>'});
+      expect(container).toHaveModalsOpen(1);
+      expect(container).toHaveClass('modal-open');
+      expect(container).toHaveBackdrop();
+
+      // Sanity checks
+      var body = $document.find('body');
+      expect(body).toHaveModalsOpen(0);
+      expect(body).not.toHaveClass('modal-open');
+      expect(body).not.toHaveBackdrop();
+
+      dismiss(modal, 'closing in test');
+      $animate.triggerCallbacks();
+
+      expect(container).toHaveModalsOpen(0);
+      expect(container).not.toHaveClass('modal-open');
+      expect(container).not.toHaveBackdrop();
+    });
+  });
+
   describe('option by option', function () {
 
     describe('template and templateUrl', function () {