Modal

Requires JavaScript to work

Modals are used to display important information and can be used to ask users for confirmation on important actions. The modals below don’t use form tags, but they can be used with them.

A modal contains the following important parts :

Modal Activator : The button that opens the modal
Modal Dialog : The alert window that contains a heading, a clearly defined message and action buttons. Cancel and Confirm buttons are the most common actions.

Note: ravixUI used the semantic HTML <dialog> element with a showModal() which is makes the rest of the page inert(non-interactive) until the modal dialog is closed. To see the support for browsers you can check caniuse dialog .

This is a simple modal that displays a message on screen, with two action buttons and a close button. Click the button below to open the modal.

<button
  id="modal-open-htm"
  type="button"
  class="inline-flex rounded-lg bg-indigo-800 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg shadow-indigo-300/40 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
>
  Open Modal
</button>
<dialog
  id="modal-container-htm"
  class="fixed inset-0 z-50 h-screen w-screen overflow-hidden bg-gray-500/0 backdrop:backdrop-blur-sm"
  aria-labelledby="modal-title"
  aria-modal="true"
>
  <div
    class="grid w-full items-center justify-items-center px-4 pb-20 pt-4 text-center text-zinc-900 sm:p-0 dark:text-gray-50"
  >
    <div
      class="flex flex-col overflow-hidden rounded-lg bg-gray-50 text-left text-gray-900 shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:align-middle dark:bg-zinc-800 dark:text-white"
    >
      <h3
        class="mb-4 w-full border-b border-gray-300 p-4 text-lg font-semibold dark:border-zinc-700"
      >
        Confirm Action
      </h3>
      <p class="mx-2 mb-1 px-4 text-lg">
        Your current action will affect the following:
      </p>
      <ul
        class="mx-10 mb-4 max-w-2xl list-outside list-disc space-y-1 marker:text-zinc-500"
      >
        <li>All of your data</li>
        <li>Your account</li>
        <li>Your wallet</li>
      </ul>

      <div
        class="flex w-full flex-row items-end justify-end gap-x-4 border-t border-gray-300 px-4 py-4 dark:border-zinc-700"
      >
        <button
          type="button"
          class="inline-flex rounded-lg bg-indigo-800 px-4 py-3 text-sm font-semibold text-gray-50 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:py-2.5 lg:text-base dark:outline-white"
          id="modal-confirm-htm"
        >
          Confirm
        </button>
        <button
          type="button"
          class="inline-flex rounded-lg border border-gray-400 bg-gray-100 px-4 py-3 text-sm font-semibold text-gray-950 outline-offset-4 outline-black hover:border-gray-500 hover:bg-gray-200 focus:outline-4 lg:py-2.5 lg:text-base dark:border-zinc-700 dark:bg-zinc-950 dark:text-gray-50 dark:outline-white dark:hover:border-zinc-500 dark:hover:bg-zinc-900"
          id="modal-cancel-htm"
        >
          Cancel
        </button>
      </div>
    </div>
  </div>
</dialog>

<script>
  /**
   * Initializes the functionality of a simple modal dialog.
   *
   * This function sets up event listeners for the modal's open, confirm, and cancel buttons.
   * When the open button is clicked, the modal is displayed. When the confirm or cancel
   * buttons are clicked, the modal is closed.
   */
  function modalInitilization() {
    const modal = document.getElementById("modal-container-htm");
    const confirmButton = document.getElementById("modal-confirm-htm");
    const cancelButton = document.getElementById("modal-cancel-htm");
    const openModalButton = document.getElementById("modal-open-htm");
    if (!modal || !openModalButton || !cancelButton || !confirmButton) return; // Should be changed according to your modal
    openModalButton?.addEventListener("click", () => {
      modal?.showModal();
    });

    confirmButton?.addEventListener("click", () => {
      modal?.close();
    });

    cancelButton?.addEventListener("click", () => {
      modal?.close();
    });
  }

 modalInitilization();
</script>

---
// SimpleModal.astro
---

<button
  id="modal-open"
  type="button"
  class="inline-flex rounded-lg bg-indigo-800 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg shadow-indigo-300/40 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
  >Open Modal</button
>
<dialog
  id="modal-container"
  class="group fixed inset-0 z-50 h-screen w-screen overflow-hidden bg-gray-500/0 text-zinc-900 backdrop:backdrop-blur-sm sm:p-0 dark:text-gray-50"
  aria-labelledby="modal-title"
  aria-modal="true"
>
  <div
    class="grid w-full items-center justify-items-center px-4 pb-20 pt-4 text-center text-zinc-900 sm:p-0 dark:text-gray-50"
  >
    <div
      class="flex flex-col overflow-hidden rounded-lg bg-gray-50 text-left text-gray-900 shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:align-middle dark:bg-zinc-800 dark:text-white"
    >
      <h3
        class="mb-4 w-full border-b border-gray-300 p-4 text-lg font-semibold dark:border-zinc-700"
      >
        Confirm Action
      </h3>
      <p class="mx-2 mb-1 px-4 text-lg">
        Your current action will affect the following:
      </p>
      <ul
        class="mx-10 mb-4 max-w-2xl list-outside list-disc space-y-1 marker:text-zinc-500"
      >
        <li>All of your data</li>
        <li>Your account</li>
        <li>Your wallet</li>
      </ul>

      <div
        class="flex w-full flex-row items-end justify-end gap-x-4 border-t border-gray-300 px-4 py-4 dark:border-zinc-700"
      >
        <button
          type="button"
          class="inline-flex rounded-lg bg-indigo-800 px-4 py-3 text-sm font-semibold text-gray-50 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:py-2.5 lg:text-base dark:outline-white"
          id="modal-confirm">Confirm</button
        >
        <button
          type="button"
          class="inline-flex rounded-lg border border-gray-400 bg-gray-100 px-4 py-3 text-sm font-semibold text-gray-950 outline-offset-4 outline-black hover:border-gray-500 hover:bg-gray-200 focus:outline-4 lg:py-2.5 lg:text-base dark:border-zinc-700 dark:bg-zinc-950 dark:text-gray-50 dark:outline-white dark:hover:border-zinc-500 dark:hover:bg-zinc-900"
          id="modal-cancel">Cancel</button
        >
      </div>
    </div>
  </div>
</dialog>

<script>
  function modalInitilization() {
    const modal = document.getElementById(
      "modal-container",
    ) as HTMLDialogElement;
    const confirmButton = document.getElementById(
      "modal-confirm",
    ) as HTMLButtonElement;
    const cancelButton = document.getElementById(
      "modal-cancel",
    ) as HTMLButtonElement;
    const openModalButton = document.getElementById(
      "modal-open",
    ) as HTMLButtonElement;

    openModalButton?.addEventListener("click", () => {
      modal.showModal();
    });
    // Open the modal

    // Close the modal when the confirm button is clicked
    confirmButton?.addEventListener("click", () => {
      modal.close();
    });

    // Close the modal when the cancel button is clicked
    cancelButton?.addEventListener("click", () => {
      modal.close();
    });
  }

  document.addEventListener("astro:page-load", modalInitilization);
</script>

This modal type serves as a means to convey critical information to the user. While it can accommodate actions within its confines, it is also capable of functioning without them but requires a close button to dismiss it. The modal dismisses itself when the user interacts with the area outside its boundaries or activates the designated close button.

<button
  id="modal-open-info-htm"
  type="button"
  class="inline-flex rounded-lg bg-indigo-800 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg shadow-indigo-300/40 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
>
  Open Modal
</button>
<dialog
  id="modal-container-info-htm"
  class="fixed inset-0 z-50 h-screen w-screen overflow-hidden bg-gray-500/0 backdrop:backdrop-blur-sm"
  aria-labelledby="modal-title-info-htm"
  aria-modal="true"
>
  <div
    class="grid w-full items-center justify-items-center px-4 pb-20 pt-4 text-center text-zinc-900 sm:p-0 dark:text-gray-50"
  >
    <div
      id="modal-content-info-area-htm"
      class="flex flex-col overflow-hidden rounded-lg bg-gray-50 text-left text-gray-900 shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:align-middle dark:bg-zinc-800 dark:text-white"
    >
      <h3
        id="modal-title-info-htm"
        class="mb-4 w-full border-b border-gray-300 p-4 text-lg font-semibold dark:border-zinc-700"
      >
        Information
      </h3>
      <p class="mx-2 mb-4 px-4 text-lg">
        This is to inform you that the current version of the app is outdated.
        Please update to the latest version.
      </p>

      <div
        class="flex w-full flex-row items-end justify-end gap-x-4 border-t border-gray-300 px-4 py-4 dark:border-zinc-700"
      >
        <button
          type="button"
          class="inline-flex rounded-lg border border-gray-400 bg-gray-100 px-4 py-3 text-sm font-semibold text-gray-950 outline-offset-4 outline-black hover:border-gray-500 hover:bg-gray-200 focus:outline-4 lg:py-2.5 lg:text-base dark:border-zinc-700 dark:bg-zinc-950 dark:text-gray-50 dark:outline-white dark:hover:border-zinc-500 dark:hover:bg-zinc-900"
          id="modal-close-info-htm"
        >
          Close
        </button>
      </div>
    </div>
  </div>
</dialog>

<script>
  /**
   * Initializes the information modal functionality.
   *
   * This function sets up the event listeners for the modal's open and close buttons,
   * as well as the logic to close the modal when the user clicks outside of it.
   *
   * The function first retrieves the necessary DOM elements, including the modal container,
   * the close button, and the open button. If any of these elements are not found, the
   * function returns early.
   *
   * The open button's click event listener shows the modal and adds a click event listener
   * to the document to close the modal when the user clicks outside of it.
   *
   * The close button's click event listener simply closes the modal.
   */
  function modalInitilizationInfo() {
    console.log("modalInitilizationInfo");
    const modal = document.getElementById("modal-container-info-htm");
    const closeButton = document.getElementById("modal-close-info-htm");
    const openModalButton = document.getElementById("modal-open-info-htm");
    if (!modal || !openModalButton || !closeButton) return;
    openModalButton?.addEventListener("click", (event) => {
      event.stopPropagation();
      modal?.showModal();
      document?.addEventListener("click", closeWhenClickedOutside);
    });

    closeButton?.addEventListener("click", () => {
      modal?.close();
    });
  }

  /**
   * Closes the information modal when the user clicks outside of it.
   *
   * This function is called when the user clicks anywhere on the document. It checks if the
   * click target is outside of the modal content area, and if so, it closes the modal and
   * removes the click event listener.
   *
   * @param {MouseEvent} event - The click event object.
   */
  function closeWhenClickedOutside(event) {
    const modal = document.getElementById("modal-container-info-htm");
    const modalArea = document.getElementById("modal-content-info-area-htm");
    console.log(modalArea);
    if (!modalArea?.contains(event.target)) {
      modal?.close();
      document.removeEventListener("click", closeWhenClickedOutside);
    }
  }

  modalInitilizationInfo();
</script>

---
// SimpleModal.astro
---

<button
  id="modal-open-info"
  type="button"
  class="inline-flex rounded-lg bg-indigo-800 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg shadow-indigo-300/40 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
  >Open Modal</button
>
<dialog
  id="modal-container-info"
  class="fixed inset-0 z-50 h-screen w-screen overflow-hidden bg-gray-500/0 backdrop:backdrop-blur-sm"
  aria-labelledby="modal-title-info"
  aria-modal="true"
>
  <div
    class="grid w-full items-center justify-items-center px-4 pb-20 pt-4 text-center text-zinc-900 sm:p-0 dark:text-gray-50"
  >
    <div
      id="modal-content-info-area"
      class="flex flex-col overflow-hidden rounded-lg bg-gray-50 text-left text-gray-900 shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:align-middle dark:bg-zinc-800 dark:text-white"
    >
      <h3
        id="modal-title-info"
        class="mb-4 w-full border-b border-gray-300 p-4 text-lg font-semibold dark:border-zinc-700"
      >
        Information
      </h3>
      <p class="mx-2 mb-4 px-4 text-lg">
        This is to inform you that the current version of the app is outdated.
        Please update to the latest version.
      </p>

      <div
        class="flex w-full flex-row items-end justify-end gap-x-4 border-t border-gray-300 px-4 py-4 dark:border-zinc-700"
      >
        <button
          type="button"
          class="inline-flex rounded-lg border border-gray-400 bg-gray-100 px-4 py-3 text-sm font-semibold text-gray-950 outline-offset-4 outline-black hover:border-gray-500 hover:bg-gray-200 focus:outline-4 lg:py-2.5 lg:text-base dark:border-zinc-700 dark:bg-zinc-950 dark:text-gray-50 dark:outline-white dark:hover:border-zinc-500 dark:hover:bg-zinc-900"
          id="modal-close-info">Close</button
        >
      </div>
    </div>
  </div>
</dialog>

<script>
  function modalInitilizationInfo() {
    const modal = document.getElementById(
      "modal-container-info",
    ) as HTMLDialogElement;
    const closeButton = document.getElementById(
      "modal-close-info",
    ) as HTMLButtonElement;
    const openModalButton = document.getElementById(
      "modal-open-info",
    ) as HTMLButtonElement;

    openModalButton?.addEventListener("click", (event) => {
      event.stopPropagation();
      modal?.showModal();

      document.addEventListener("click", closeWhenClickedOutside);
    });
    // Open the modal

    // Close the modal when the close button is clicked
    closeButton?.addEventListener("click", () => {
      modal?.close();
    });
  }
  function closeWhenClickedOutside(event: MouseEvent) {
    const modal = document.getElementById(
      "modal-container-info",
    ) as HTMLDialogElement;
    const modalArea = document.getElementById(
      "modal-content-info-area",
    ) as HTMLDivElement;

    if (!modalArea?.contains(event.target as Node)) {
      modal?.close();
      document.removeEventListener("click", closeWhenClickedOutside);
    }
  }
  document.addEventListener("astro:page-load", modalInitilizationInfo);
</script>

Note: To ensure best user experience, it is recommended to have a close button in the modal. This will help users to dismiss the modal in all cases.

Accessibility Testing Status

Component	NVDA	Windows Narrator	WAVE	Axe	IBM Equal Access
Simple Modal	Yes	Yes	Yes	Yes	Yes
Information Modal	Yes	Yes	Yes	Yes	Yes

The modals above make the content behind them inaccessible until the modal is closed and is very disruptive to the user experience, so ensure that the modal is only used when the content is critical and requires user interaction or critical information needs to be conveyed.

Modal

Modal Specifications

Simple Modal

Information Modal

Accessibility Testing Status