0.0.4

Dialog

A pure vanilla JS implementation of Zag JS Dialog Opens in a new window

Anatomy

The Dialog component consists of the following data-part

trigger backdrop positioner title description close-trigger 
<div class="dialog dialog-js">
                  <button data-part="trigger" class="button" aria-label="Open dialog">
                  Open Dialog
                  </button>
                  <div data-part="backdrop"></div>
                  <div data-part="positioner">
                  <div data-part="content">
                  <h3 data-part="title">Title</h3>
                  <p data-part="description">
                  Description
                  </p>
                  <button data-part="close-trigger" class="button button--circle button-sm" aria-label="Close menu">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
                  </svg>
                  </button>
                  <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  </p>
                  </div>
                  </div>
                  </div>

Data attributes

Each dialog can be set with different settings with the following data-attribute.

<div class="dialog dialog-js" id="custom-dialog" data-aria-label="My dialog title" data-default-open="false" data-dir="rtl" data-modal="true" data-prevent-scroll="false" data-restore-focus="true" data-trap-focus="true" data-close-on-interact-outside="false" data-close-on-escape="true" data-role="dialog">
                  <button data-part="trigger" class="button" aria-label="Open dialog">
                  Open Dialog
                  </button>
                  <div data-part="backdrop"></div>
                  <div data-part="positioner">
                  <div data-part="content">
                  <h3 data-part="title">Title</h3>
                  <p data-part="description">
                  Description
                  </p>
                  <button data-part="close-trigger" class="button" aria-label="Close menu">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
                  </svg>
                  </button>
                  <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  </p>
                  </div>
                  </div>
                  </div>
Data attribute Type / Options Description
id string The unique id of the component. Default generated if none is provided
data-default-open string The initial open state of the dialog
data-value string The controlled open state of the dialog
data-dir ltr | rtl The orientation of the dialog. Can be `ltr` or `rtl`
data-aria-label string Human readable label for the dialog, in event the dialog title is not rendered
data-modal boolean Whether to prevent pointer interaction outside the element and hide all content below it
data-open boolean The controlled open state of the dialog
data-prevent-scroll boolean Whether to prevent scrolling behind the dialog when it's opened
data-restore-focus boolean Whether to restore focus to the element that had focus before the dialog was opened
data-trap-focus boolean Whether to trap focus inside the dialog when it's opened
data-close-on-interact-outside boolean Whether to trap focus inside the dialog when it's opened
data-close-on-escape boolean Whether to close the dialog when the escape key is pressed
data-role "dialog" || "alertdialog The dialog's role

Callbacks

Each dialog component can receive callbacks that can be used to respond to user interaction with custom behavior.

You must add a custom id and an event listener for your event name


                  document.getElementById("my-callback-dialog")
                  ?.addEventListener("my-callback-dialog-event", (event) => {
                    console.log("Received event:", (event as CustomEvent).detail);
                  });
              
<div id="my-callback-dialog" class="dialog dialog-js" data-on-open-change="my-callback-dialog-event">
                  <button data-part="trigger" class="button" aria-label="Open dialog">
                  Open Dialog
                  </button>
                  <div data-part="backdrop"></div>
                  <div data-part="positioner">
                  <div data-part="content">
                  <h3 data-part="title">Title</h3>
                  <p data-part="description">
                  Description
                  </p>
                  <button data-part="close-trigger" class="button" aria-label="Close menu">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
                  </svg>
                  </button>
                  <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  </p>
                  </div>
                  </div>
                  </div>

Open your browser's console to see the events received when you open or close the above dialog

Data attribute Type / Options Description
data-on-open-change string Event name to send when the dialog's open state changes

Open State Control

Dialog open state can be control with data attributes on any element, it can also be outside of the dialog

You must set a custom id for your dialog, as the default is randomly generated

data-open-dialog="dialog-id" data-close-dialog="dialog-id" 
<button data-open-dialog="my-dialog" class="button" aria-label="Open dialog">
                  Open Dialog
                  </button>
                  <div id="my-dialog" class="dialog dialog-js">
                  <div data-part="backdrop"></div>
                  <div data-part="positioner">
                  <div data-part="content">
                  <h3 data-part="title">Title</h3>
                  <p data-part="description">
                  Description
                  </p>
                  <button data-part="close-trigger" class="button" aria-label="Close menu">
                  <svg class="button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
                  </svg>
                  </button>
                  <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  </p>
                  <button data-close-dialog="my-dialog" class="button">Cancel</button>
                  <button data-close-dialog="my-dialog" class="button button--accent">Confirm</button>
                  </div>
                  </div>
                  </div>

You also dispatch an event named dialog:set-open to the dialog id with a boolean value


                  const el = document.getElementById("my-dialog");
                  if (el) {
                    el.dispatchEvent(
                      new CustomEvent("dialog:set-open", {
                        detail: { value: true },
                      })
                    );
                  } else {
                    console.warn("Element with ID 'my-dialog' not found");
                  }

Templates

Dialog components is available in the followng templates

Date Picker Link