WIP

examples/dialog/DemoDialog.mjs

@@ -1,5 +1,6 @@
 import Dialog      from '../../src/dialog/Base.mjs';
 import SelectField from '../../src/form/field/Select.mjs';
+import Button      from '../../src/button/Base.mjs';
 
 /**
  * @class Neo.examples.dialog.DemoDialog
@@ -13,9 +14,15 @@ class DemoDialog extends Dialog {
 
         wrapperStyle: {
             width : '40%'
-        },
+        }
+    }
+
+    construct() {
+        super.construct(...arguments);
+
+        const me = this;
 
-        items : [{
+        me.items = [{
             module   : SelectField,
             labelText: 'Select',
 
@@ -33,7 +40,33 @@ class DemoDialog extends Dialog {
                     return result;
                 })()
             }
-        }]
+        }, {
+            module : Button,
+            handler: me.createDialog.bind(me),
+            iconCls: 'fa fa-window-maximize',
+            text   : 'Create new modal Dialog',
+        }];
+    }
+
+    createDialog(data) {
+        let me = this;
+
+        data.component.disabled = true;
+
+        me.dialog = Neo.create(DemoDialog, {
+            appName            : me.appName,
+            boundaryContainerId: me.boundaryContainerId,
+            listeners          : {close: me.onWindowClose, scope: me},
+            modal              : true
+        });
+    }
+
+    onWindowClose() {
+        let button = this.down({
+            text: 'Create new modal Dialog'
+        });
+
+        button.disabled = false;
     }
 }
 

examples/dialog/MainContainer.mjs

@@ -50,6 +50,13 @@ class MainContainer extends Viewport {
                 listeners     : {change: me.onDragLimitChange, scope: me},
                 style         : {marginLeft: '3em'},
                 valueLabelText: 'Limit Drag&Drop to the document.body'
+            }, {
+                module        : CheckBox,
+                checked       : true,
+                hideLabel     : true,
+                hideValueLabel: false,
+                style         : {marginLeft: '3em'},
+                valueLabelText: 'Modal'
             }, '->', {
                 module : Button,
                 handler: me.switchTheme.bind(me),
@@ -71,7 +78,8 @@ class MainContainer extends Viewport {
             animateTargetId    : data.component.id,
             appName            : me.appName,
             boundaryContainerId: me.boundaryContainerId,
-            listeners          : {close: me.onWindowClose, scope: me}
+            listeners          : {close: me.onWindowClose, scope: me},
+            modal              : me.down({ valueLabelText : 'Modal' }).checked
         });
     }
 

resources/scss/src/dialog/Base.scss

@@ -17,20 +17,33 @@
     }
 }
 
-.neo-dialog-wrapper {
-    display : flex;
-    position: absolute;
-    z-index : 20; // ensure to be on top of table headers
+.neo-dialog-modal-mask {
+    position         : fixed;
+    top              : 0;
+    left             : 0;
+    bottom           : 0;
+    right            : 0;
+    background-color : rgba(100, 100, 100, 0.5);
+    backdrop-filter  : blur(1px);
+    z-index          : 1000;
+}
 
-    transition-duration       : 200ms;
-    transition-property       : height, left, top, transform, width;
-    transition-timing-function: ease-out;
+.neo-dialog {
+    border        : 1px solid var(--dialog-border-color);
+    display       : flex;
+    flex-direction: column;
+
+    &.animated-hiding-showing {
+        transition-duration       : 200ms;
+        transition-property       : height, left, top, transform, width;
+        transition-timing-function: ease-out;
+    }
 
     &.neo-maximized {
         height   : 98% !important;
         left     : 1%  !important;
         top      : 1%  !important;
-        transform: none;
+        transform: none!important;
         width    : 98% !important;
 
         &.neo-panel {
@@ -41,14 +54,6 @@
             }
         }
     }
-}
-
-.neo-dialog {
-    border        : 1px solid var(--dialog-border-color);
-    display       : flex;
-    flex          : 1 0 auto;
-    flex-direction: column;
-    position      : relative;
 
     &.neo-panel {
         .neo-footer-toolbar {

src/component/Base.mjs

@@ -902,20 +902,24 @@ class Base extends CoreBase {
      * @returns {Promise<void>}
      */
     async alignTo(spec={}) {
-        const me = this;
+        const
+            me    = this,
+            align = {
+                ...me.align,
+                ...spec,
+                id                  : me.id,
+                configuredFlex      : me.configuredFlex,
+                configuredWidth     : me.configuredWidth,
+                configuredHeight    : me.configuredHeight,
+                configuredMinWidth  : me.configuredMinWidth,
+                configuredMinHeight : me.configuredMinHeight,
+                configuredMaxWidth  : me.configuredMaxWidth,
+                configuredMaxHeight : me.configuredMaxHeight
+            };
 
-        await Neo.main.DomAccess.align({
-            ...me.align,
-            ...spec,
-            id                  : me.id,
-            configuredFlex      : me.configuredFlex,
-            configuredWidth     : me.configuredWidth,
-            configuredHeight    : me.configuredHeight,
-            configuredMinWidth  : me.configuredMinWidth,
-            configuredMinHeight : me.configuredMinHeight,
-            configuredMaxWidth  : me.configuredMaxWidth,
-            configuredMaxHeight : me.configuredMaxHeight
-        });
+        if (align.target) {
+            await Neo.main.DomAccess.align(align);
+        }
     }
 
     /**