refs #5

Make stacked dialogs look better.
nakupanda · Jun 17, 2014 · f718f12 · f718f12
1 parent 1260702
commit f718f12
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 3 deletions.
diff --git a/dist/js/bootstrap-dialog.js b/dist/js/bootstrap-dialog.js
@@ -64,6 +64,9 @@
 
     BootstrapDialog.ICON_SPINNER = 'glyphicon glyphicon-asterisk';
 
+    BootstrapDialog.ZINDEX_BACKDROP = 1040;
+    BootstrapDialog.ZINDEX_MODAL = 1050;
+
     /**
      * Default options.
      */
@@ -731,6 +734,20 @@
         showPageScrollBar: function(show) {
             $(document.body).toggleClass('modal-open', show);
         },
+        /**
+         * To make multiple opened dialogs look better.
+         */
+        updateZIndex: function() {
+            var dialogCount = Object.keys(BootstrapDialog.dialogs).length;
+            if (dialogCount > 1) {
+                var $modal = this.getModal();
+                var $backdrop = $modal.data('bs.modal').$backdrop;
+                $modal.css('z-index', BootstrapDialog.ZINDEX_MODAL + (dialogCount - 1) * 20);
+                $backdrop.css('z-index', BootstrapDialog.ZINDEX_BACKDROP + (dialogCount - 1) * 20);
+            }
+
+            return this;
+        },
         realize: function() {
             this.initModalStuff();
             this.getModal().addClass(BootstrapDialog.NAMESPACE)
@@ -758,6 +775,7 @@
         open: function() {
             !this.isRealized() && this.realize();
             this.getModal().modal('show');
+            this.updateZIndex();
             this.setOpened(true);
 
             return this;

diff --git a/dist/js/bootstrap-dialog.min.js b/dist/js/bootstrap-dialog.min.js
diff --git a/examples/assets/bootstrap-dialog/js/bootstrap-dialog.js b/examples/assets/bootstrap-dialog/js/bootstrap-dialog.js
@@ -64,6 +64,9 @@
 
     BootstrapDialog.ICON_SPINNER = 'glyphicon glyphicon-asterisk';
 
+    BootstrapDialog.ZINDEX_BACKDROP = 1040;
+    BootstrapDialog.ZINDEX_MODAL = 1050;
+
     /**
      * Default options.
      */
@@ -731,6 +734,20 @@
         showPageScrollBar: function(show) {
             $(document.body).toggleClass('modal-open', show);
         },
+        /**
+         * To make multiple opened dialogs look better.
+         */
+        updateZIndex: function() {
+            var dialogCount = Object.keys(BootstrapDialog.dialogs).length;
+            if (dialogCount > 1) {
+                var $modal = this.getModal();
+                var $backdrop = $modal.data('bs.modal').$backdrop;
+                $modal.css('z-index', BootstrapDialog.ZINDEX_MODAL + (dialogCount - 1) * 20);
+                $backdrop.css('z-index', BootstrapDialog.ZINDEX_BACKDROP + (dialogCount - 1) * 20);
+            }
+
+            return this;
+        },
         realize: function() {
             this.initModalStuff();
             this.getModal().addClass(BootstrapDialog.NAMESPACE)
@@ -758,6 +775,7 @@
         open: function() {
             !this.isRealized() && this.realize();
             this.getModal().modal('show');
+            this.updateZIndex();
             this.setOpened(true);
 
             return this;

diff --git a/examples/assets/bootstrap-dialog/js/bootstrap-dialog.min.js b/examples/assets/bootstrap-dialog/js/bootstrap-dialog.min.js
diff --git a/js/bootstrap-dialog.js b/js/bootstrap-dialog.js
@@ -64,6 +64,9 @@
 
     BootstrapDialog.ICON_SPINNER = 'glyphicon glyphicon-asterisk';
 
+    BootstrapDialog.ZINDEX_BACKDROP = 1040;
+    BootstrapDialog.ZINDEX_MODAL = 1050;
+
     /**
      * Default options.
      */
@@ -731,6 +734,20 @@
         showPageScrollBar: function(show) {
             $(document.body).toggleClass('modal-open', show);
         },
+        /**
+         * To make multiple opened dialogs look better.
+         */
+        updateZIndex: function() {
+            var dialogCount = Object.keys(BootstrapDialog.dialogs).length;
+            if (dialogCount > 1) {
+                var $modal = this.getModal();
+                var $backdrop = $modal.data('bs.modal').$backdrop;
+                $modal.css('z-index', BootstrapDialog.ZINDEX_MODAL + (dialogCount - 1) * 20);
+                $backdrop.css('z-index', BootstrapDialog.ZINDEX_BACKDROP + (dialogCount - 1) * 20);
+            }
+
+            return this;
+        },
         realize: function() {
             this.initModalStuff();
             this.getModal().addClass(BootstrapDialog.NAMESPACE)
@@ -758,6 +775,7 @@
         open: function() {
             !this.isRealized() && this.realize();
             this.getModal().modal('show');
+            this.updateZIndex();
             this.setOpened(true);
 
             return this;

diff --git a/js/bootstrap-dialog.min.js b/js/bootstrap-dialog.min.js