<dialog>는 모달과 대화 상자를 위한 네이티브 element입니다. 포커스 트래핑, 백드롭, 최상위 레이어(top layer), Escape로 닫기를 처리합니다. 그렇지 않으면 많은 JavaScript와 ARIA로 직접 만들어야 하는 기능들입니다.
html
Confirm
Are you sure?
Cancel
OK
const modal = document.getElementById("myModal");
modal.showModal(); // 모달로 연다: 백드롭 + 포커스 트랩 + Esc로 닫힘
modal.show(); // 비모달로 연다 (백드롭 없음, 페이지는 상호작용 가능 유지)
modal.close("ok"); // 닫고, returnValue를 설정한다
modal.addEventListener("close", () => {
console.log(modal.returnValue); // "ok" 또는 "cancel" — 버튼의 value로부터
});
::backdrop으로 스타일링 가능하고, 바깥쪽 클릭을 감지할 수 있습니다.z-index와 관계없이 모든 것 위에 렌더링됩니다.method="dialog" — dialog를 닫고 어느 버튼이 제출했는지 기록합니다.dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog { border: none; border-radius: 8px; padding: 2rem; }
<dialog> 이전에는 접근성 있는 모달이 수동 포커스 관리, ARIA role, 스크롤 잠금, Escape 처리를 요구했으며, 이는 악명 높은 버그의 원천이었습니다.
네이티브 element는 이 모든 것을 올바르게 기본 제공합니다.
진짜 모달에는 showModal()을 사용하십시오. 이것이 대화 상자를 위한 현대적이고 접근성 있는 기본값입니다.