Modal: adds support for multiple visible modals #491

src/modules/dimmer.less

@@ -19,7 +19,7 @@
 
 .ui.dimmer {
   display: none;
-  position: fixed;
+  position: absolute;
   top: 0em !important;
   left: 0em !important;
 
@@ -33,42 +33,14 @@
   opacity: 0;
   line-height: 1;
 
-  -webkit-animation-fill-mode: both;
-  -moz-animation-fill-mode: both;
-  -o-animation-fill-mode: both;
-  -ms-animation-fill-mode: both;
   animation-fill-mode: both;
-
-  -webkit-animation-duration: 0.5s;
-  -moz-animation-duration: 0.5s;
-  -o-animation-duration: 0.5s;
-  -ms-animation-duration: 0.5s;
   animation-duration: 0.5s;
 
-  -webkit-transition:
-    background-color 0.5s linear
-  ;
-  -moz-transition:
-    background-color 0.5s linear
-  ;
-  -o-transition:
-    background-color 0.5s linear
-  ;
-  -ms-transition:
-    background-color 0.5s linear
-  ;
   transition:
     background-color 0.5s linear
   ;
 
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
-
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
   box-sizing: border-box;
 
   z-index: 1000;
@@ -79,10 +51,6 @@
   width: 100%;
   height: 100%;
   display: table;
-
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
   user-select: text;
 }
 .ui.dimmer > .content > div {
@@ -94,14 +62,10 @@
 
 /* Loose Coupling */
 .ui.segment > .ui.dimmer {
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
   border-radius: 5px;
 }
 .ui.horizontal.segment > .ui.dimmer,
 .ui.vertical.segment > .ui.dimmer {
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
   border-radius: 5px;
 }
 

src/modules/modal.js

@@ -79,8 +79,9 @@ $.fn.modal = function(parameters) {
             })
           ;
 
-          if(settings.detachable)
+          if(settings.detachable) {
             $dimmable.dimmer('add content', $module);
+          }
 
           $dimmer = $dimmable
             .dimmer('get dimmer')
@@ -176,7 +177,12 @@ $.fn.modal = function(parameters) {
           click: function(event) {
             if( $(event.target).closest(selector.modal).size() === 0 ) {
               module.debug('Dimmer clicked, hiding all modals');
-              module.hideAll();
+              if(settings.allowMultiple) {
+                module.hide();
+              }
+              else {
+                module.hideAll();
+              }
               event.stopImmediatePropagation();
             }
           },
@@ -235,7 +241,7 @@ $.fn.modal = function(parameters) {
             module.set.position();
             module.set.type();
 
-            if( $otherModals.filter(':visible').size() > 0 ) {
+            if( $otherModals.filter(':visible').size() > 0 && !settings.allowMultiple) {
               module.debug('Other modals visible, queueing show animation');
               module.hideOthers(module.showModal);
             }
@@ -281,7 +287,9 @@ $.fn.modal = function(parameters) {
             ? callback
             : function(){}
           ;
-          module.hideDimmer();
+          if($allModals.filter(':visible').size() <= 1) {
+            module.hideDimmer();
+          }
           module.hideModal(callback);
         },
 
@@ -656,25 +664,27 @@ $.fn.modal = function(parameters) {
 
 $.fn.modal.settings = {
 
-  name        : 'Modal',
-  namespace   : 'modal',
-
-  debug       : false,
-  verbose     : true,
-  performance : true,
-
-  closable    : true,
-  context     : 'body',
-  detachable  : false,
-  duration    : 500,
-  easing      : 'easeOutExpo',
-  offset      : 0,
-  transition  : 'scale',
-
-  onShow      : function(){},
-  onHide      : function(){},
-  onApprove   : function(){ return true; },
-  onDeny      : function(){ return true; },
+  name          : 'Modal',
+  namespace     : 'modal',
+
+  debug         : true,
+  verbose       : true,
+  performance   : true,
+
+  allowMultiple : true,
+  detachable    : true,
+  closable      : true,
+  context       : 'body',
+
+  duration      : 500,
+  easing        : 'easeOutExpo',
+  offset        : 0,
+  transition    : 'scale',
+
+  onShow        : function(){},
+  onHide        : function(){},
+  onApprove     : function(){ return true; },
+  onDeny        : function(){ return true; },
 
   selector    : {
     close    : '.close, .actions .button',