Working on legacy setting for modals

src/definitions/modules/dimmer.js

@@ -92,6 +92,10 @@ $.fn.dimmer = function(parameters) {
 
           module.bind.events();
           module.set.dimmable();
+          if(!module.can.useFlex()) {
+            module.debug('Absolutely positioned flex not supported. Using legacy positioning.');
+            module.set.legacy();
+          }
           module.instantiate();
         },
 
@@ -248,7 +252,9 @@ $.fn.dimmer = function(parameters) {
               }
               $dimmer
                 .transition({
-                  displayType : 'flex',
+                  displayType : settings.useFlex
+                    ? 'flex'
+                    : 'block',
                   animation   : settings.transition + ' in',
                   queue       : false,
                   duration    : module.get.duration(),
@@ -391,6 +397,10 @@ $.fn.dimmer = function(parameters) {
         },
 
         can: {
+          useFlex: function() {
+            // test for IE11/edge
+            return true;
+          },
           show: function() {
             return !$dimmer.hasClass(className.disabled);
           }
@@ -415,6 +425,9 @@ $.fn.dimmer = function(parameters) {
             module.debug('Setting opacity to', opacity);
             $dimmer.css('background-color', color);
           },
+          legacy: function() {
+            $dimmer.addClass(className.legacy);
+          },
           active: function() {
             $dimmer.addClass(className.active);
           },
@@ -652,6 +665,9 @@ $.fn.dimmer.settings = {
   name        : 'Dimmer',
   namespace   : 'dimmer',
 
+  // whether should use flex layout
+  useFlex     : 'auto',
+
   silent      : false,
   debug       : false,
   verbose     : false,
@@ -700,6 +716,7 @@ $.fn.dimmer.settings = {
     dimmer     : 'dimmer',
     disabled   : 'disabled',
     hide       : 'hide',
+    legacy     : 'legacy',
     pageDimmer : 'page',
     show       : 'show'
   },

src/definitions/modules/dimmer.less

@@ -113,6 +113,18 @@
            Variations
 *******************************/
 
+
+/*--------------
+    Legacy
+---------------*/
+
+/* Animating / Active / Visible */
+.dimmed.dimmable > .ui.animating.legacy.dimmer,
+.dimmed.dimmable > .ui.visible.legacy.dimmer,
+.ui.active.legacy.dimmer {
+  display: block;
+}
+
 /*--------------
     Alignment
 ---------------*/

src/definitions/modules/modal.js

@@ -107,6 +107,7 @@ $.fn.modal = function(parameters) {
           dimmer: function() {
             var
               defaultSettings = {
+                flex       : settings.flex,
                 debug      : settings.debug,
                 variation  : settings.centered
                   ? false
@@ -335,6 +336,9 @@ $.fn.modal = function(parameters) {
             else {
               if(settings.allowMultiple && settings.detachable) {
                 $module.detach().appendTo($dimmer);
+              }
+              if(!module.can.useFlex()) {
+
               }
               settings.onShow.call(element);
               if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
@@ -564,6 +568,9 @@ $.fn.modal = function(parameters) {
         },
 
         can: {
+          useFlex: function() {
+            return $dimmer.dimmer('can use flex');
+          },
           fit: function() {
             var
               contextHeight  = module.cache.contextHeight,
@@ -880,6 +887,8 @@ $.fn.modal.settings = {
   name           : 'Modal',
   namespace      : 'modal',
 
+  useFlex        : 'auto',
+
   silent         : false,
   debug          : false,
   verbose        : false,

src/definitions/modules/modal.less

@@ -23,6 +23,7 @@
 *******************************/
 
 .ui.modal {
+  position: absolute;
   display: none;
   z-index: @zIndex;
   text-align: left;