Show modal

This example is based off a modal cloneable created by Corey Moen. This uses some Webflow custom elements to provide a dialog element and a button. There's also custom code. The first small snippet is CSS for the modal backdrop. Then there's JavaScript to hide and show the modal as well as to show it after a set time or on intention to leave the window (y axis).

A look at the code

The JavaScript

// Global variables
const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");

// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
  dialog.close();
});

// Close the dialog when clicking outside of it
dialog.addEventListener("click", (e) => {
  const dialogDimensions = dialog.getBoundingClientRect();
  if (
    e.clientX < dialogDimensions.left ||
    e.clientX > dialogDimensions.right ||
    e.clientY < dialogDimensions.top ||
    e.clientY > dialogDimensions.bottom
  ) {
    dialog.close();
  }
});

// When the DOM is ready
document.addEventListener("DOMContentLoaded", () => {
  // Check if the modal has been shown before
  let modalShown = localStorage.getItem("modalShown") === "true";

  // Show the modal after 15 seconds if
  // the modal hasn't been shown before
  const showModal = () => {
    if (!modalShown) {
      localStorage.setItem("modalShown", true);
      modalShown = true;
      dialog.showModal();
      console.log("Modal shown");
    }
  };

  setTimeout(showModal, 15000);

  // Show the modal if the user leaves
  // the page and hasn't seen the modal before
  document.addEventListener("mouseleave", (event) => {
    if (event.clientY <= 0) {
      showModal();
    }
  });
});

The CSS

dialog::backdrop {
  background-color: rgb(0 0 0 / 80%);
  backdrop-filter: blur(8px); /* And blur for some fun flare ;) */
}