Enable closing modals by clicking backdrop

sillsdev · Jul 25, 2023 · d800b71 · d800b71
1 parent b4718f7
commit d800b71
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/frontend/src/lib/components/modals/Modal.svelte b/frontend/src/lib/components/modals/Modal.svelte
@@ -88,7 +88,13 @@
 
 {#if $open}
   <!-- using DaisyUI modal https://daisyui.com/components/modal/ -->
-  <dialog bind:this={dialog} class="modal justify-items-center" class:modal-bottom={bottom} on:cancel={cancelModal}>
+  <dialog
+    bind:this={dialog}
+    class="modal justify-items-center"
+    class:modal-bottom={bottom}
+    on:cancel={cancelModal}
+    on:close={cancelModal}
+  >
     <div class="modal-box max-w-3xl">
       {#if showCloseButton}
         <button class="btn btn-sm btn-circle absolute right-2 top-2" aria-label={$t('close')} on:click={cancelModal}
@@ -107,5 +113,8 @@
         </div>
       {/if}
     </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>invisible</button>
+    </form>
   </dialog>
 {/if}