Local accessible dialog generator

Bina dialog HTML asli yang boleh diakses

Buat pencetus modal, dialog berlabel dan borang tutup asli dengan HTML dan JavaScript yang boleh disalin.

HTML ready

Native dialog preview

Settings

Choose your preferences.

<button type="button" id="open-settings-dialog" aria-haspopup="dialog">Open settings</button>

<dialog id="settings-dialog" aria-labelledby="settings-dialog-title">
  <form method="dialog">
    <div class="dialog-panel">
      <h2 id="settings-dialog-title">Settings</h2>
      <p>Choose your preferences.</p>
      <button type="submit">Close</button>
    </div>
  </form>
</dialog>

<script>
  const dialog = document.getElementById("settings-dialog");
  document.getElementById("open-settings-dialog").addEventListener("click", () => dialog.showModal());
</script>

Everything runs in your browser. Nothing is uploaded or saved.

Use the native dialog model

showModal() places the dialog in the top layer and gives it modal behavior with a backdrop.

aria-labelledby connects the dialog to a visible heading so assistive technology gets its name from the content.

A form with method=dialog lets a submit button close the dialog without custom close plumbing.

Dialog questions

Why use dialog instead of a div?

The native element provides modal state, top-layer rendering, and built-in close behavior when opened with showModal().

How does the close button work?

The button submits the surrounding form with method=dialog, which closes the dialog and sets its return value.

Does this handle focus management?

Native modal dialogs manage the basic focus behavior. Test your final content and add app-specific focus handling when needed.