로컬 접근 가능한 dialog 생성기

접근 가능한 native HTML dialog 만들기

modal trigger, 제목이 연결된 dialog, native 닫기 form을 만들고 HTML과 JavaScript를 복사하세요.

HTML 준비 완료

Native dialog 미리보기

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>

모든 처리는 브라우저에서 진행됩니다. 아무것도 업로드하거나 저장하지 않습니다.

Native dialog 모델 사용하기

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 질문

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.