Dialog

A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert.

Add Delivery Address

The delivery address will be used for shipping your orders. Please ensure that the address is accurate and complete.

<div>
  <button data-dialog-trigger="dialog1" class="btn sz-md variant-outlined">
      <span class="btn-label">Open Dialog</span>
  </button>
  <dialog class="shadow-xl size-fit p-8 m-auto max-w-lg card variant-outlined origin-bottom" role="dialog" id="dialog1" aria-labelledby="dialog1_label">
      <h2 id="dialog1_label" class="text-title font-medium">Add Delivery Address</h2>
      <p class="text-body text-sm mt-2">The refund will be reflected in the customer’s bank account 2 to 3 business days after processing.</p>

      <form action="post" id="userAddress" class="mt-6">
          <div data-shade="950" class="field">
              <label class="text-title font-medium text-sm" for="address">Address</label>
              <input type='text' id="address" placeholder="Lubumbashi" required class="input variant-mixed sz-md rounded-btn"/>
          </div>
      </form>
      
      <div class="mt-8 flex justify-end gap-3">
          <button data-dialog-close class="btn sz-sm variant-outlined">
              <span class="btn-label">Cancel</span>
          </button>
          <button class="btn sz-sm variant-primary" type="submit" form="userAddress">
              <span class="btn-label">Save</span>
          </button>
      </div>
  </dialog>
</div>

Installation

1. Add Component TS

Copy paste the following in a .ts file

document.addEventListener('DOMContentLoad', () => {
  const dialogTriggers = document.querySelectorAll('[data-dialog-trigger]') as NodeListOf<HTMLButtonElement>;

  dialogTriggers.forEach((dialogTrigger) => {
      const dialogId = dialogTrigger.getAttribute('data-dialog-trigger') as string;

      if (!dialogId) {
          console.error('Dialog trigger is missing a valid "data-dialog-trigger" attribute.');
          return; 
      }

      const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;

      if (!dialog) {
          console.error(`Dialog with ID "${dialogId}" not found.`);
          return; 
      }

      const dialogClose = dialog.querySelector('[data-dialog-close]') as HTMLButtonElement | null;

      if (!dialogClose) {
          console.error(`Close button not found in dialog with ID "${dialogId}".`);
          return; 
      }

      dialogTrigger.addEventListener('click', () => dialog.showModal());
      dialogClose.addEventListener('click', () => dialog.close());
  });
});

2. Add Css for animation

Copy and paste the following css in your main css file

dialog[open]{
  opacity: 1;
  transform: scale(1);
}

dialog{
  opacity: 0;
  transform: scale(0.9);
  transition:
      opacity 0.1s ease-out,
      transform 0.1s ease-out allow-discrete,
      overlay 0.1s ease-out allow-discrete,
      display 0.1s ease-out allow-discrete;
}

@starting-style {
  dialog[open] {
      opacity: 0;
      transform: scale(0.9);
  }
}

dialog::backdrop{
  background-color: rgb(0 0 0 / 0%);
  transition:
      display 0.1s allow-discrete,
      overlay 0.1s allow-discrete,
      background-color 0.1s;
}

dialog[open]::backdrop {
  background-color: var(--overlay-bg);
}

@starting-style {
  dialog[open]::backdrop {
      background-color: rgb(0 0 0 / 0%);
  }
}

Edit Repository

Edit repository details


Input description
<div>
  <button data-dialog-trigger="dialog2" class="btn sz-md variant-outlined">
      <span class="btn-label">Open Dialog</span>
  </button>
  <dialog class="shadow-xl size-fit m-auto max-w-md w-full card variant-outlined origin-bottom" role="dialog" id="dialog2" aria-labelledby="dialog2_label">
      <h2 id="dialog2_label" class="text-title font-medium">Edit Repository</h2>
      <p class="text-body text-sm mt-2">Edit repository details</p>

      <hr class="border-dashed my-4" />
      
      <form action="post" id="repoEdit" class="space-y-6">
          <div class="field">
              <label class="text-title" for="url">Website</label>
              <input type='url' id="url" required class="input variant-mixed sz-md"/>
              <span class="inline-block text-sm text-caption">Input description</span>
          </div>
          <div class="field">
              <label class="text-title" for="desc">Description</label>
              <textarea class="textarea variant-mixed sz-md" id="desc" rows="3" >Highly customizable components for crafting modern, personalized websites and applications.
              </textarea>
          </div>
          <div data-shade="glassy" class="space-y-3">
              <div class="field">
                  <div class="grid items-center gap-x-3 gap-y-1 [grid-template-columns:auto_1fr]">
                      <label for="c1" class="checkbox group">
                          <input checked class="peer" type="checkbox" id="c1" name="checkbox1"  />
                          <svg class="checkbox-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="pointer-events: none;"><path d="M20 6 9 17l-5-5"></path></svg>
                      </label>
                      <label for="c1" class="block text-title select-none">Releases</label>
                  </div>
              </div>
              <div class="field">
                  <div class="grid items-center gap-x-3 gap-y-1 [grid-template-columns:auto_1fr]">
                      <label for="c2" class="checkbox group">
                          <input class="peer" type="checkbox" id="c2" name="checkbox1"  />
                          <svg class="checkbox-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="pointer-events: none;"><path d="M20 6 9 17l-5-5"></path></svg>
                      </label>
                      <label for="c2" class="block text-title select-none">Packages</label>
                  </div>
              </div>
              <div class="field">
                  <div class="grid items-center gap-x-3 gap-y-1 [grid-template-columns:auto_1fr]">
                      <label for="c3" class="checkbox group">
                          <input class="peer" type="checkbox" id="c3" name="checkbox1"  />
                          <svg class="checkbox-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="pointer-events: none;"><path d="M20 6 9 17l-5-5"></path></svg>
                      </label>
                      <label for="c3" class="block text-title select-none">Environments</label>
                  </div>
              </div>
          </div>
      </form>
      
      <div class="-mx-8 px-8 pt-6 border-t mt-8 flex justify-end gap-3">
          <button data-dialog-close class="btn sz-sm variant-outlined">
              <span class="btn-label">Cancel</span>
          </button>
          <button class="btn sz-sm variant-primary" type="submit" form="repoEdit">
              <span class="btn-label">Save changes</span>
          </button>
      </div>
  </dialog>
</div>