Add option to close modal when is clicked outsite

squidit · Nov 12, 2021 · 95afe71 · 95afe71
1 parent 7c10684
commit 95afe71
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 44 deletions.
diff --git a/dist/js/squid.js b/dist/js/squid.js
@@ -172,8 +172,25 @@ function createModal (event, trigger) {
   event.preventDefault()
   const modal = document.getElementById(trigger.dataset.modal)
   const backdrop = document.createElement('div')
+  const dataBackdrop = modal.getAttribute('data-backdrop')
   backdrop.setAttribute('id', 'modal-backdrop')
   backdrop.setAttribute('class', 'modal-backdrop show')
+  if (dataBackdrop !== 'static') {
+    modal.addEventListener('click', (event) => {
+      event.preventDefault()
+      const modalDialog = modal.firstElementChild
+      if (!modalDialog?.contains(event.target)) {
+        if (backdrop.parentNode) {
+          backdrop.parentNode.removeChild(backdrop)
+        }
+        modal.classList.remove('open')
+        setTimeout(() => {
+          modal.style.display = 'none'
+          body.classList.remove('block')
+        }, 500)
+      }
+    })
+  }
   document.body.appendChild(backdrop)
   const body = document.getElementsByTagName('body')[0]
   body.classList.add('block')

diff --git a/dist/js/squid.min.js b/dist/js/squid.min.js
diff --git a/dist/js/squid.min.js.map b/dist/js/squid.min.js.map
diff --git a/index.html b/index.html
@@ -2539,6 +2539,48 @@ <h5 class='m-0'>Modal Title</h5>
             </div>
           </div>
         </div>
+        <div class='col-24 col-md-6'>
+          <h6 class='text-medium'>
+            Example with backdrop exit
+          </h6>
+          <button
+            type='button'
+            class='button button-pink mb-3'
+            data-modal="modal-backdrop"
+            data-modal-backdrop-exit="true"
+          >
+            Open
+          </button>
+          <div class="modal align-items-center" id="modal-backdrop" data-backdrop="none">
+            <div class="modal-dialog modal-md">
+              <div class='modal-content'>
+                <div class='modal-header'>
+                  <h5 class='m-0'>Modal Title</h5>
+                  <button class="button-close modal-exit">
+                    <i class="far fa-times"></i>
+                  </button>
+                </div>
+                <div class='modal-body'>
+                  <p>
+                    Content Modal
+                  </p>
+                </div>
+                <div class='modal-footer'>
+                  <button
+                    class='button button-white black mr-3 modal-exit'
+                  >
+                    Close
+                  </button>
+                  <button
+                    class='button button-pink'
+                  >
+                    Button
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <div class='row mb-3'>
         <div class='col-24 col-md-6'>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@squidit/css",
-  "version": "1.2.52",
+  "version": "1.2.53",
   "scripts": {
     "start": "gulp watch",
     "css": "sass src/scss/squid.scss:dist/css/squid.min.css --style compressed",

diff --git a/src/docs/public/js/squid.js b/src/docs/public/js/squid.js
@@ -172,8 +172,25 @@ function createModal (event, trigger) {
   event.preventDefault()
   const modal = document.getElementById(trigger.dataset.modal)
   const backdrop = document.createElement('div')
+  const dataBackdrop = modal.getAttribute('data-backdrop')
   backdrop.setAttribute('id', 'modal-backdrop')
   backdrop.setAttribute('class', 'modal-backdrop show')
+  if (dataBackdrop !== 'static') {
+    modal.addEventListener('click', (event) => {
+      event.preventDefault()
+      const modalDialog = modal.firstElementChild
+      if (!modalDialog?.contains(event.target)) {
+        if (backdrop.parentNode) {
+          backdrop.parentNode.removeChild(backdrop)
+        }
+        modal.classList.remove('open')
+        setTimeout(() => {
+          modal.style.display = 'none'
+          body.classList.remove('block')
+        }, 500)
+      }
+    })
+  }
   document.body.appendChild(backdrop)
   const body = document.getElementsByTagName('body')[0]
   body.classList.add('block')

diff --git a/src/docs/src/components/modal.mdx b/src/docs/src/components/modal.mdx
@@ -8,90 +8,85 @@ route: /components/modal
 
 JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
 
-<div class='box black'>
-  <strong>Attention</strong>: the use of the components needs the <span class='pink'>squid.js</span> included in the project
+<div class="box black">
+  <strong>Attention</strong>: the use of the components needs the{" "}
+  <span class="pink">squid.js</span> included in the project
 </div>
-
-<div class='box black'>
-  <strong>Attention + 1</strong>: Probably the interaction via Javascript should not work well in SPA applications (independent of the framework React, Angular, Vuejs, etc). For now we have no implementation but we will create in the future, for now just use the styles and create your own implementation
+<div class="box black">
+  <strong>Attention + 1</strong>: Probably the interaction via Javascript should
+  not work well in SPA applications (independent of the framework React,
+  Angular, Vuejs, etc). For now we have no implementation but we will create in
+  the future, for now just use the styles and create your own implementation
 </div>
-
 <button
-  type='button'
-  class='button button-pink mb-3'
+  type="button"
+  class="button button-pink mb-3"
   data-modal="modal-exemple"
 >
   Open
 </button>
 <div class="modal align-items-center" id="modal-exemple" data-backdrop="static">
   <div class="modal-dialog modal-md">
-    <div class='modal-content'>
-      <div class='modal-header'>
-        <h5 class='m-0'>Modal Title</h5>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="m-0">Modal Title</h5>
         <button class="button-close modal-exit">
           <i class="far fa-times"></i>
         </button>
       </div>
-      <div class='modal-body'>
-        <p>
-          Content Modal
-        </p>
+      <div class="modal-body">
+        <p>Content Modal</p>
       </div>
-      <div class='modal-footer'>
-        <button
-          class='button button-white black mr-3 modal-exit'
-        >
-          Close
-        </button>
-        <button
-          class='button button-pink'
-        >
-          Button
-        </button>
+      <div class="modal-footer">
+        <button class="button button-white black mr-3 modal-exit">Close</button>
+        <button class="button button-pink">Button</button>
       </div>
     </div>
   </div>
 </div>
 
 ```html
-<button
-  type='button'
-  data-modal="modal-id"
->
+<button type="button" data-modal="modal-id">
   <!-- Button content, data-modal must reference the `id` attribute of the modal -->
 </button>
-<div
-  class="modal"
-  id="modal-id"
-  data-backdrop="static"
->
+<div class="modal" id="modal-id" data-backdrop="static">
   <div class="modal-dialog">
-    <div class='modal-content'>
-      <div class='modal-header'>
+    <div class="modal-content">
+      <div class="modal-header">
         <!-- Modal Title -->
         <button class="button-close modal-exit">
           <i class="far fa-times"></i>
         </button>
       </div>
-      <div class='modal-body'>
+      <div class="modal-body">
         <!-- Modal Content -->
       </div>
-      <div class='modal-footer'>
+      <div class="modal-footer">
         <!-- Modal Footer -->
       </div>
     </div>
   </div>
 </div>
 ```
 
+## Modal backdrop Close
+
+To close modal when the backdrop is clicked, just remove the `data-backdrop="static"` attribute to the modal.
+
+```html
+<div class="modal" id="modal-id">
+  <!-- Content -->
+</div>
+```
+
 ## Modal Sizes
 
-Just add one of the classes below to `.modal-dialog`. 
+Just add one of the classes below to `.modal-dialog`.
 If no size class is passed, the modal will be the full size of the screen.
 Where value is one of:
 
 ```css
 .modal-sm,
 .modal-md,
 .modal-lg
-```
+```
diff --git a/src/js/components/modal.js b/src/js/components/modal.js
@@ -7,8 +7,25 @@ function createModal (event, trigger) {
   event.preventDefault()
   const modal = document.getElementById(trigger.dataset.modal)
   const backdrop = document.createElement('div')
+  const dataBackdrop = modal.getAttribute('data-backdrop')
   backdrop.setAttribute('id', 'modal-backdrop')
   backdrop.setAttribute('class', 'modal-backdrop show')
+  if (dataBackdrop !== 'static') {
+    modal.addEventListener('click', (event) => {
+      event.preventDefault()
+      const modalDialog = modal.firstElementChild
+      if (!modalDialog?.contains(event.target)) {
+        if (backdrop.parentNode) {
+          backdrop.parentNode.removeChild(backdrop)
+        }
+        modal.classList.remove('open')
+        setTimeout(() => {
+          modal.style.display = 'none'
+          body.classList.remove('block')
+        }, 500)
+      }
+    })
+  }
   document.body.appendChild(backdrop)
   const body = document.getElementsByTagName('body')[0]
   body.classList.add('block')