fix(modal) Added z-index setting on modal and backdrops

src/modal/modal.js

@@ -11,6 +11,7 @@ angular.module('ui.bootstrap.modal', [])
 
         return {
           add: function (key, value) {
+            value.stackIndex = stack.length;
             stack.push({
               key: key,
               value: value
@@ -61,6 +62,9 @@ angular.module('ui.bootstrap.modal', [])
         //trigger CSS transitions
         $timeout(function () {
           scope.animate = true;
+          var modal = $modalStack.getTop();
+          var styleData = 'z-index: ' +  (1040 + 20*modal.window.stackIndex) + ';';
+          element[0].setAttribute('style', styleData);
         });
 
         scope.close = function (evt) {
@@ -76,7 +80,7 @@ angular.module('ui.bootstrap.modal', [])
     };
   }])
 
-  .directive('modalWindow', ['$timeout', function ($timeout) {
+  .directive('modalWindow', ['$timeout', '$modalStack',function ($timeout,$modalStack) {
     return {
       restrict: 'EA',
       scope: {},
@@ -86,6 +90,9 @@ angular.module('ui.bootstrap.modal', [])
       link: function (scope, element, attrs) {
         //trigger CSS transitions
         $timeout(function () {
+          var modal = $modalStack.getTop();
+          var styleData = 'z-index: ' + (1050 + 20 * modal.window.stackIndex) + ';';
+          element[0].setAttribute('style', styleData);
           scope.animate = true;
         });
       }

src/modal/test/modal.spec.js

@@ -80,7 +80,27 @@ describe('$modal', function () {
         };
 
         return backdropDomEls.length === 1;
+      },
+
+      toHaveOneDivWithCertainClassAndZindexInStyleAttr: function(divclass, expectedZindex) {
+
+        var domEls = this.actual.find('body > div.'+divclass);
+        this.message = function() {
+          return "Expected '" + angular.mock.dump(domEls) + "' to be a div element with class '"+divclass+"' and style containing z-index: "+expectedZindex+".";
+        };
+        var divsAtLevel = 0;
+        for(var i=0; i < domEls.length; i++)
+        {
+            var domEl = domEls[i];
+            var style = domEl.getAttribute('style');
+            if (style.indexOf('z-index: ' + expectedZindex) != -1) {
+                divsAtLevel++;
+            }
+        }
+
+        return divsAtLevel === 1;
       }
+
     });
   }));
 
@@ -364,7 +384,7 @@ describe('$modal', function () {
 
   describe('multiple modals', function () {
 
-    it('it should allow opening of multiple modals', function () {
+    it('should allow opening of multiple modals', function () {
 
       var modal1 = open({template: '<div>Modal1</div>'});
       var modal2 = open({template: '<div>Modal2</div>'});
@@ -377,7 +397,19 @@ describe('$modal', function () {
       dismiss(modal1);
       expect($document).toHaveModalsOpen(0);
     });
-
+
+    it('should occlude any open child modals', function() {
+      var modal1 = open({template: '<div>Modal1</div>'});
+      $timeout.flush(); // to call the directives in their natural order
+      var modal2 = open({template: '<div>Modal2</div>'});      
+      $timeout.flush();
+
+      expect($document).toHaveOneDivWithCertainClassAndZindexInStyleAttr('modal-backdrop','1040');
+      expect($document).toHaveOneDivWithCertainClassAndZindexInStyleAttr('modal','1050');
+      expect($document).toHaveOneDivWithCertainClassAndZindexInStyleAttr('modal-backdrop','1060');
+      expect($document).toHaveOneDivWithCertainClassAndZindexInStyleAttr('modal','1070');
+    });
+
     it('should not close any modals on ESC if the topmost one does not allow it', function () {
 
       var modal1 = open({template: '<div>Modal1</div>'});

src/modal/test/stackedMap.spec.js

@@ -19,6 +19,13 @@ describe('stacked map', function () {
     expect(stackedMap.get('foo')).toBeUndefined();
   });
 
+  it('should add the stackIndex to the value object', function() {
+     stackedMap.add('foo', { name: 'foo_value'});
+     stackedMap.add('bar', { name: 'bar_value'});
+     expect(stackedMap.get('foo').value.stackIndex).toEqual(0);
+     expect(stackedMap.get('bar').value.stackIndex).toEqual(1);
+  });
+
   it('should get topmost element', function () {
 
     stackedMap.add('foo', 'foo_value');