fix(modal): outside close button handling

when you have two modals on top of each other, if the height of both of them are the same and close buttons are out of the modal, the close buttons are on each other which has a bad user experience.

In addition the close icon from the first modal was still clickable and would close the first modal.

In some cases the close icon could be shown over a different inner Dimmer making the close icon invisible, so i added a slight text shadow to keep it visible. This text shadow is not recognizable on usual modal usage .

At last i made the dimmer class of the inner dimmer optional, so one could customize that as well.

src/definitions/modules/modal.js

@@ -216,8 +216,8 @@ $.fn.modal = function(parameters) {
             module.verbose('Creating unique id for element', id);
           },
           innerDimmer: function() {
-            if ( $module.find(selector.dimmer).length == 0 ) {
-              $module.prepend('<div class="ui inverted dimmer"></div>');
+            if ( $module.find(selector.dimmer).length === 0 ) {
+              $('<div/>', {class: className.innerDimmer}).prependTo($module);
             }
           }
         },
@@ -1422,7 +1422,8 @@ $.fn.modal.settings = {
     template   : 'ui tiny modal',
     ok         : 'positive',
     cancel     : 'negative',
-    prompt     : 'ui fluid input'
+    prompt     : 'ui fluid input',
+    innerDimmer: 'ui inverted dimmer'
   },
   text: {
     ok    : 'Ok',

src/definitions/modules/modal.less

@@ -208,6 +208,16 @@
   .ui.modal:not(.fullscreen) {
     width: @tabletWidth;
     margin: @tabletMargin;
+    & > .active.dimmer + .close:not(.inside) {
+      pointer-events: none;
+      opacity: @closeOpacityDimmed;
+    }
+  }
+  .ui.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside){
+    text-shadow: @closeShadow;
+  }
+  .ui.inverted.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside){
+    text-shadow: @invertedCloseShadow;
   }
 }
 @media only screen and (min-width : @computerBreakpoint) {

src/themes/default/modules/modal.variables

@@ -14,6 +14,7 @@
 
 /* Close Icon */
 @closeOpacity: 0.8;
+@closeOpacityDimmed: 0.1;
 @closeSize: 1.25em;
 @closeColor: @white;
 
@@ -23,6 +24,12 @@
 @closePadding: @closeHitBoxOffset 0 0 0;
 @closeTop: -(@closeDistance + @closeHitbox);
 @closeRight: -(@closeDistance + @closeHitbox);
+@closeShadow:
+  -1px -1px 2px rgba(0, 0, 0, 0.3),
+  1px -1px 2px rgba(0, 0, 0, 0.3),
+  -1px 2px 2px rgba(0, 0, 0, 0.3),
+  1px 2px 2px rgba(0, 0, 0, 0.3)
+;
 
 /* Header */
 @headerMargin: 0;
@@ -249,3 +256,9 @@
 @invertedActionBorder: 1px solid rgba(34, 36, 38, 0.85);
 @invertedActionColor: @white;
 @invertedDimmerCloseColor: rgba(0,0,0,.85);
+@invertedCloseShadow:
+  -1px -1px 2px rgba(255, 255, 255, 0.3),
+  1px -1px 2px rgba(255, 255, 255, 0.3),
+  -1px 2px 2px rgba(255, 255, 255, 0.3),
+  1px 2px 2px rgba(255, 255, 255, 0.3)
+;