diff --git a/app/views/console/account/index.phtml b/app/views/console/account/index.phtml
index d1e98f7364..f1c04c44cf 100644
--- a/app/views/console/account/index.phtml
+++ b/app/views/console/account/index.phtml
@@ -73,7 +73,7 @@ use Utopia\Locale\Locale;
                                             <input name="password" type="password" class="full-width" autocomplete="off" placeholder="" required>
 
                                             <footer>
-                                                <button type="submit"><?php echo Locale::getText('console.account.section.overview.actions.update'); ?></button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse"><?php echo Locale::getText('console.account.section.overview.actions.cancel'); ?></button>
+                                                <button type="submit"><?php echo Locale::getText('console.account.section.overview.actions.update'); ?></button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse"><?php echo Locale::getText('console.account.section.overview.actions.cancel'); ?></button>
                                             </footer>
                                         </div>
                                     </div>
@@ -102,7 +102,7 @@ use Utopia\Locale\Locale;
                                     <input name="password" type="password" class="full-width" autocomplete="off" placeholder="" required data-forms-password-meter>
 
                                     <footer>
-                                        <button type="submit"><?php echo Locale::getText('console.account.section.overview.actions.update-password'); ?></button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse"><?php echo Locale::getText('console.account.section.overview.actions.cancel'); ?></button>
+                                        <button type="submit"><?php echo Locale::getText('console.account.section.overview.actions.update-password'); ?></button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse"><?php echo Locale::getText('console.account.section.overview.actions.cancel'); ?></button>
                                     </footer>
                                 </form>
                             </div>
diff --git a/app/views/console/comps/header.phtml b/app/views/console/comps/header.phtml
index c2d79ca749..5c460c551f 100644
--- a/app/views/console/comps/header.phtml
+++ b/app/views/console/comps/header.phtml
@@ -147,7 +147,7 @@
         <br />
 
         <footer>
-            <button type="submit">Create</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
+            <button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
         </footer>
     </form>
 </div>
\ No newline at end of file
diff --git a/app/views/console/home/index.phtml b/app/views/console/home/index.phtml
index f231a5c091..54dd1b0bc2 100644
--- a/app/views/console/home/index.phtml
+++ b/app/views/console/home/index.phtml
@@ -80,7 +80,7 @@
             <li class="clear">
 
                 <div data-ui-modal class="modal close" data-button-text="Update" data-button-class="pull-end">
-                    <button type="button" class="close pull-end" data-ls-trigger="modal-close"><i class="icon-cancel"></i></button>
+                    <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
 
                     <h1>Update Platform</h1>
 
@@ -143,7 +143,7 @@
 </div>
 
 <div data-ui-modal class="modal close" data-button-alias="web-new">
-    <button type="button" class="close pull-end" data-ls-trigger="modal-close"><i class="icon-cancel"></i></button>
+    <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
 
     <h1>New Website</h1>
 
@@ -190,7 +190,7 @@
         </div>
 
         <div class="margin-top">
-            <button type="submit">Register</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
+            <button type="submit">Register</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
         </div>
     </form>
 </div>
@@ -242,7 +242,7 @@
         </div>
 
         <div class="margin-top">
-            <button type="submit">Update</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
+            <button type="submit">Update</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
         </div>
     </form>
 </script>
\ No newline at end of file
diff --git a/app/views/console/settings/index.phtml b/app/views/console/settings/index.phtml
index e59055ae4d..ef80b69277 100644
--- a/app/views/console/settings/index.phtml
+++ b/app/views/console/settings/index.phtml
@@ -194,7 +194,7 @@ $scopes = [ // TODO sync with project list
                         <ul data-ls-loop="console-keys" data-ls-as="key" class="list">
                             <li class="clear">
                                 <div data-ui-modal class="modal close" data-button-text="Update" data-button-class="pull-end">
-                                    <button type="button" class="close pull-end" data-ls-trigger="modal-close"><i class="icon-cancel"></i></button>
+                                    <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
 
                                     <h1>Update API Key</h1>
 
@@ -228,7 +228,7 @@ $scopes = [ // TODO sync with project list
                                         </div>
 
                                         <div>
-                                            <button type="submit">Save</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
+                                            <button type="submit">Save</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                                         </div>
                                     </form>
                                 </div>
@@ -253,7 +253,7 @@ $scopes = [ // TODO sync with project list
                                 <div class="margin-bottom-tiny"><span data-ls-bind="{{key.name}}"></span> <span class="note">(<span data-ls-bind="{{key.scopes.length}}"></span> scopes granted)</span></div>
 
                                 <div data-ui-modal class="modal close" data-button-text="Show Secret" data-button-class="link margin-top-small" data-button-icon="icon-right-open">
-                                    <button type="button" class="close pull-end" data-ls-trigger="modal-close"><i class="icon-cancel"></i></button>
+                                    <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
 
                                     <h1>API Key Secret</h1>
 
@@ -262,7 +262,7 @@ $scopes = [ // TODO sync with project list
                                             <textarea disabled style="height: 130px; line-height: 26px" data-forms-copy data-ls-bind="{{key.secret}}"></textarea>
                                         </div>
                                         <div>
-                                            <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
+                                            <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                                         </div>
                                     </form>
                                 </div>
@@ -272,7 +272,7 @@ $scopes = [ // TODO sync with project list
 
                     <div class="clear">
                         <div data-ui-modal class="modal close" data-button-text="Add API Key">
-                            <button type="button" class="close pull-end" data-ls-trigger="modal-close"><i class="icon-cancel"></i></button>
+                            <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
 
                             <h1>Add API Keys</h1>
 
@@ -307,7 +307,7 @@ $scopes = [ // TODO sync with project list
                                 <br />
 
                                 <div>
-                                    <button type="submit">Create</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
+                                    <button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                                 </div>
                             </form>
                         </div>
@@ -340,7 +340,7 @@ $scopes = [ // TODO sync with project list
                             <li class="clear">
 
                                 <div data-ui-modal class="modal close" data-button-text="Update" data-button-class="pull-end">
-                                    <button type="button" class="close pull-end" data-ls-trigger="modal-close"><i class="icon-cancel"></i></button>
+                                    <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
 
                                     <h1>Update Webhook</h1>
 
@@ -406,7 +406,7 @@ $scopes = [ // TODO sync with project list
                                         <br />
 
                                         <div>
-                                            <button type="submit">Save</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
+                                            <button type="submit">Save</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                                         </div>
                                     </form>
                                 </div>
@@ -439,7 +439,7 @@ $scopes = [ // TODO sync with project list
 
                     <div class="clear">
                         <div data-ui-modal class="modal close" data-button-text="Add Webhook">
-                            <button type="button" class="close pull-end" data-ls-trigger="modal-close"><i class="icon-cancel"></i></button>
+                            <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
 
                             <h1>Add Webhook</h1>
 
@@ -504,7 +504,7 @@ $scopes = [ // TODO sync with project list
                                 <br />
 
                                 <div>
-                                    <button type="submit">Create</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
+                                    <button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                                 </div>
                             </form>
                         </div>
@@ -585,7 +585,7 @@ $scopes = [ // TODO sync with project list
                                     </td>
                                     <td>
                                         <div data-ui-modal class="modal close" data-button-text="" data-button-class="pull-end reverse round" data-button-icon="icon-cog">
-                                            <button type="button" class="close pull-end" data-ls-trigger="modal-close"><i class="icon-cancel"></i></button>
+                                            <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
 
                                             <h1>Update Task</h1>
 
@@ -688,7 +688,7 @@ $scopes = [ // TODO sync with project list
                                                 </div>
 
                                                 <div>
-                                                    <button type="submit">Update</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
+                                                    <button type="submit">Update</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                                                 </div>
                                             </form>
 
@@ -717,7 +717,7 @@ $scopes = [ // TODO sync with project list
 
                     <div class="clear">
                         <div data-ui-modal class="modal close" data-button-text="Add Task">
-                            <button type="button" class="close pull-end" data-ls-trigger="modal-close"><i class="icon-cancel"></i></button>
+                            <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
 
                             <h1>Add Task</h1>
 
@@ -806,7 +806,7 @@ $scopes = [ // TODO sync with project list
                                 </div>
 
                                 <div>
-                                    <button type="submit">Create</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
+                                    <button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                                 </div>
                             </form>
                         </div>
@@ -872,7 +872,7 @@ $scopes = [ // TODO sync with project list
                     </div>
 
                     <div data-ui-modal class="modal close width-small" data-button-text="<?php echo Locale::getText('console.settings.section.members.labels.invite'); ?>" data-button-class="">
-                        <button type="button" class="close pull-end" data-ls-trigger="modal-close"><i class="icon-cancel"></i></button>
+                        <button type="button" class="close pull-end" data-ui-modal-close><i class="icon-cancel"></i></button>
 
                         <h1><?php echo Locale::getText('console.settings.section.members.labels.invite'); ?></h1>
 
@@ -900,7 +900,7 @@ $scopes = [ // TODO sync with project list
 
                             <div class="clear">
                                 <button><?php echo Locale::getText('console.settings.section.members.labels.send'); ?></button>
-                                &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse"><?php echo Locale::getText('console.settings.section.members.labels.cancel'); ?></button>
+                                &nbsp; <button data-ui-modal-close="" type="button" class="reverse"><?php echo Locale::getText('console.settings.section.members.labels.cancel'); ?></button>
                             </div>
                         </form>
                     </div>
diff --git a/app/views/console/users/index.phtml b/app/views/console/users/index.phtml
index 8515aefc67..5e1ae15a76 100644
--- a/app/views/console/users/index.phtml
+++ b/app/views/console/users/index.phtml
@@ -19,7 +19,7 @@ $providers = $this->getParam('providers', []);
                     <div class="col span-2">
                         <div class="clear">
                             <div data-ui-modal class="modal close" data-button-text="" data-button-class="pull-end round" data-button-icon="icon-plus">
-                                <button type="button" class="close pull-end" data-ls-trigger="modal-close"><i class="icon-cancel"></i></button>
+                                <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
 
                                 <h1>Create User</h1>
 
@@ -40,7 +40,7 @@ $providers = $this->getParam('providers', []);
                                     <label for="user-password">Password</label>
                                     <input type="password" class="full-width" id="user-password" name="password" required autocomplete="off" />
 
-                                    <button type="submit">Create</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
+                                    <button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                                 </form>
                             </div>
                         </div>
@@ -142,7 +142,7 @@ $providers = $this->getParam('providers', []);
                 <div class="row responsive force-reverse clear margin-bottom-tiny">
                     <div class="col span-2">
                         <div data-ui-modal class="modal close" data-button-text="" data-button-class="pull-end round" data-button-icon="icon-plus">
-                            <button type="button" class="close pull-end" data-ls-trigger="modal-close"><i class="icon-cancel"></i></button>
+                            <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
 
                             <h1>Create Team</h1>
 
@@ -157,7 +157,7 @@ $providers = $this->getParam('providers', []);
                                 <label for="user-name">Name</label>
                                 <input type="text" class="full-width" id="user-name" name="name" required autocomplete="off" />
 
-                                <button type="submit">Create</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
+                                <button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                             </form>
                         </div>
                     </div>
@@ -227,7 +227,7 @@ $providers = $this->getParam('providers', []);
                                                 <label for="name">Name</label>
                                                 <input name="name" id="name" type="text" autocomplete="off" data-ls-bind="{{team.name}}">
 
-                                                <button>Update</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
+                                                <button>Update</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                                             </form>
                                         </div>
                                     </td>
@@ -299,7 +299,7 @@ $providers = $this->getParam('providers', []);
                                         </div>
                                     </div>
 
-                                    <button>Update</button> &nbsp; <button data-ls-trigger="modal-close" type="button" class="reverse">Cancel</button>
+                                    <button>Update</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                                 </form>
                             </div>
 
diff --git a/public/dist/scripts/app-all.js b/public/dist/scripts/app-all.js
index a58df9175d..80f9f90515 100644
--- a/public/dist/scripts/app-all.js
+++ b/public/dist/scripts/app-all.js
@@ -2287,9 +2287,10 @@ else{list[i].classList.remove('selected');}}};document.addEventListener('state-c
 if(!buttonAlias){buttonElement.innerText=buttonText;buttonElement.className=buttonClass;buttonElement.type='button';if(buttonIcon){let iconElement=document.createElement('i');iconElement.className=buttonIcon;buttonElement.insertBefore(iconElement,buttonElement.firstChild);}}
 if(buttonEvent){buttonElement.addEventListener('click',function(){document.dispatchEvent(new CustomEvent(buttonEvent,{bubbles:false,cancelable:true}));});}
 element.classList.add('modal');if(!buttonAlias){element.parentNode.insertBefore(buttonElement,element);}
-let open=function(){document.documentElement.classList.add('modal-open');document.dispatchEvent(new CustomEvent('modal-open',{bubbles:false,cancelable:true}));element.classList.add('open');element.classList.remove('close');};if(name){document.querySelectorAll("[data-ui-modal-ref='"+name+"']").forEach(function(elem){elem.addEventListener('click',open);});}
+let open=function(){document.documentElement.classList.add('modal-open');document.dispatchEvent(new CustomEvent('modal-open',{bubbles:false,cancelable:true}));element.classList.add('open');element.classList.remove('close');};let close=function(){document.documentElement.classList.remove('modal-open');element.classList.add('close');element.classList.remove('open');};if(name){document.querySelectorAll("[data-ui-modal-ref='"+name+"']").forEach(function(elem){elem.addEventListener('click',open);});}
 if(openEvent){document.addEventListener(openEvent,open);}
-buttonElement.addEventListener('click',open);document.addEventListener('keydown',function(event){if(event.which===27){document.dispatchEvent(new CustomEvent('modal-close',{bubbles:false,cancelable:true}));}});element.addEventListener('blur',function(){document.dispatchEvent(new CustomEvent('modal-close',{bubbles:false,cancelable:true}));});document.addEventListener('modal-close',function(){document.documentElement.classList.remove('modal-open');element.classList.add('close');element.classList.remove('open');});}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ls-ui-open',repeat:false,controller:function(element,window){let def=(element.classList.contains('open'))?'open':'close';let buttonClass=element.dataset['buttonClass'];let buttonText=element.dataset['buttonText']||'';let buttonIcon=element.dataset['buttonIcon']||'';let hover=element.hasAttribute('data-hover');let button=window.document.createElement('button');let isTouch=function(){return'ontouchstart'in window||navigator.maxTouchPoints;};button.innerText=buttonText;button.className=buttonClass;button.tabIndex=1;if(buttonIcon){let icon=window.document.createElement('i');icon.className=buttonIcon;button.insertBefore(icon,button.firstChild);}
+buttonElement.addEventListener('click',open);document.addEventListener('keydown',function(event){if(event.which===27){close();}});element.addEventListener('blur',close);let closeButtons=element.querySelectorAll('[data-ui-modal-close]');for(let i=0;i<closeButtons.length;i++){closeButtons[i].addEventListener('click',close);}
+document.addEventListener('modal-close',close);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ls-ui-open',repeat:false,controller:function(element,window){let def=(element.classList.contains('open'))?'open':'close';let buttonClass=element.dataset['buttonClass'];let buttonText=element.dataset['buttonText']||'';let buttonIcon=element.dataset['buttonIcon']||'';let hover=element.hasAttribute('data-hover');let button=window.document.createElement('button');let isTouch=function(){return'ontouchstart'in window||navigator.maxTouchPoints;};button.innerText=buttonText;button.className=buttonClass;button.tabIndex=1;if(buttonIcon){let icon=window.document.createElement('i');icon.className=buttonIcon;button.insertBefore(icon,button.firstChild);}
 if(def==='close'){element.classList.add('close');element.classList.remove('open');}
 else{element.classList.add('open');element.classList.remove('close');}
 button.addEventListener('click',function(){element.classList.toggle('open');element.classList.toggle('close');});if(hover&&!isTouch()){element.addEventListener('mouseover',function(){element.classList.add('open');element.classList.remove('close');});element.addEventListener('mouseout',function(){element.classList.add('close');element.classList.remove('open');});}
diff --git a/public/dist/scripts/app.js b/public/dist/scripts/app.js
index 7240d7be79..b8c73d2fef 100644
--- a/public/dist/scripts/app.js
+++ b/public/dist/scripts/app.js
@@ -345,9 +345,10 @@ else{list[i].classList.remove('selected');}}};document.addEventListener('state-c
 if(!buttonAlias){buttonElement.innerText=buttonText;buttonElement.className=buttonClass;buttonElement.type='button';if(buttonIcon){let iconElement=document.createElement('i');iconElement.className=buttonIcon;buttonElement.insertBefore(iconElement,buttonElement.firstChild);}}
 if(buttonEvent){buttonElement.addEventListener('click',function(){document.dispatchEvent(new CustomEvent(buttonEvent,{bubbles:false,cancelable:true}));});}
 element.classList.add('modal');if(!buttonAlias){element.parentNode.insertBefore(buttonElement,element);}
-let open=function(){document.documentElement.classList.add('modal-open');document.dispatchEvent(new CustomEvent('modal-open',{bubbles:false,cancelable:true}));element.classList.add('open');element.classList.remove('close');};if(name){document.querySelectorAll("[data-ui-modal-ref='"+name+"']").forEach(function(elem){elem.addEventListener('click',open);});}
+let open=function(){document.documentElement.classList.add('modal-open');document.dispatchEvent(new CustomEvent('modal-open',{bubbles:false,cancelable:true}));element.classList.add('open');element.classList.remove('close');};let close=function(){document.documentElement.classList.remove('modal-open');element.classList.add('close');element.classList.remove('open');};if(name){document.querySelectorAll("[data-ui-modal-ref='"+name+"']").forEach(function(elem){elem.addEventListener('click',open);});}
 if(openEvent){document.addEventListener(openEvent,open);}
-buttonElement.addEventListener('click',open);document.addEventListener('keydown',function(event){if(event.which===27){document.dispatchEvent(new CustomEvent('modal-close',{bubbles:false,cancelable:true}));}});element.addEventListener('blur',function(){document.dispatchEvent(new CustomEvent('modal-close',{bubbles:false,cancelable:true}));});document.addEventListener('modal-close',function(){document.documentElement.classList.remove('modal-open');element.classList.add('close');element.classList.remove('open');});}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ls-ui-open',repeat:false,controller:function(element,window){let def=(element.classList.contains('open'))?'open':'close';let buttonClass=element.dataset['buttonClass'];let buttonText=element.dataset['buttonText']||'';let buttonIcon=element.dataset['buttonIcon']||'';let hover=element.hasAttribute('data-hover');let button=window.document.createElement('button');let isTouch=function(){return'ontouchstart'in window||navigator.maxTouchPoints;};button.innerText=buttonText;button.className=buttonClass;button.tabIndex=1;if(buttonIcon){let icon=window.document.createElement('i');icon.className=buttonIcon;button.insertBefore(icon,button.firstChild);}
+buttonElement.addEventListener('click',open);document.addEventListener('keydown',function(event){if(event.which===27){close();}});element.addEventListener('blur',close);let closeButtons=element.querySelectorAll('[data-ui-modal-close]');for(let i=0;i<closeButtons.length;i++){closeButtons[i].addEventListener('click',close);}
+document.addEventListener('modal-close',close);}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ls-ui-open',repeat:false,controller:function(element,window){let def=(element.classList.contains('open'))?'open':'close';let buttonClass=element.dataset['buttonClass'];let buttonText=element.dataset['buttonText']||'';let buttonIcon=element.dataset['buttonIcon']||'';let hover=element.hasAttribute('data-hover');let button=window.document.createElement('button');let isTouch=function(){return'ontouchstart'in window||navigator.maxTouchPoints;};button.innerText=buttonText;button.className=buttonClass;button.tabIndex=1;if(buttonIcon){let icon=window.document.createElement('i');icon.className=buttonIcon;button.insertBefore(icon,button.firstChild);}
 if(def==='close'){element.classList.add('close');element.classList.remove('open');}
 else{element.classList.add('open');element.classList.remove('close');}
 button.addEventListener('click',function(){element.classList.toggle('open');element.classList.toggle('close');});if(hover&&!isTouch()){element.addEventListener('mouseover',function(){element.classList.add('open');element.classList.remove('close');});element.addEventListener('mouseout',function(){element.classList.add('close');element.classList.remove('open');});}
diff --git a/public/scripts/views/ui/modal.js b/public/scripts/views/ui/modal.js
index 2a86912a9a..805552e3ec 100644
--- a/public/scripts/views/ui/modal.js
+++ b/public/scripts/views/ui/modal.js
@@ -68,6 +68,13 @@
                     element.classList.remove('close');
                 };
 
+                let close = function () {
+                    document.documentElement.classList.remove('modal-open');
+
+                    element.classList.add('close');
+                    element.classList.remove('open');
+                };
+
                 if(name) {
                     document.querySelectorAll("[data-ui-modal-ref='" + name + "']").forEach(function(elem) {
                         elem.addEventListener('click', open);
@@ -82,26 +89,19 @@
 
                 document.addEventListener('keydown', function(event) {
                     if (event.which === 27) {
-                        document.dispatchEvent(new CustomEvent('modal-close', {
-                            bubbles: false,
-                            cancelable: true
-                        }));
+                        close();
                     }
                 });
 
-                element.addEventListener('blur', function() {
-                    document.dispatchEvent(new CustomEvent('modal-close', {
-                        bubbles: false,
-                        cancelable: true
-                    }));
-                });
+                element.addEventListener('blur', close);
 
-                document.addEventListener('modal-close', function () {
-                    document.documentElement.classList.remove('modal-open');
+                let closeButtons = element.querySelectorAll('[data-ui-modal-close]');
 
-                    element.classList.add('close');
-                    element.classList.remove('open');
-                });
+                for(let i =0; i < closeButtons.length; i++){
+                    closeButtons[i].addEventListener('click', close);
+                }
+
+                document.addEventListener('modal-close', close);
             }
         }
     );