Dialog

Native dialog element inside HTML using Webflow custom elements. This element is rendered above all elements.

1. Default Dialog

   Component

   Code

   Open Dialog

   Signup

   Create an account to access all assets for free.

   Email

   Password

   Signup

   Thank you! Your submission has been received!

   Oops! Something went wrong while submitting the form.

   

   <style>
   dialog[open] {
     opacity: 1;
   }
   dialog {
     order: none;
     padding: 0px;
     border: 0px;
     background: none;
     color: inherit;
   }
   @starting-style {
     dialog[open] {
       transform: scaleY(0);
     }
   }
   dialog::backdrop {
     background-color: #00000050
   }
   
   dialog[open]::backdrop {
       background-color: rgb(0 0 0 / 40%);
       backdrop-filter: blur(4px);
   }
   @starting-style {
     dialog[open]::backdrop {
       background-color: rgb(0 0 0 / 0%);
     }
   }
   
   </style>

   const dialogbutton = thind.element.get("dialog-demo");
   const dialogClose = thind.element.get("dialogClose");
   const dialog = thind.element.get("dialog");
   
   dialogbutton.addEventListener("click", () => {
       dialog.showModal();
       });
   
   dialogClose.addEventListener("click", () => {
       dialog.close();
       });

   Prerequisites

   Thind JS