Added z-index setting on modal and backdrops

To support multiple modals with different sizes, added code in
directives to set the z-index of each div based on the modal stack
depth. Starts initial backdrop at 1040 (bootstrap's 'modal' class value)
and the modal itself at 1050. Subsequent modals are offset by 20 with
each additional modal.

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');