<dialog> 는 모달 팝업 을 태그 한 줄로 구현할 수 있는 HTML 요소입니다. ESC 키로 창 닫기, 포커스 트랩, 배경 어둡게 처리(::backdrop) 등을 브라우저가 기본 제공 합니다.
✅ 2026년 현재 모든 메이저 브라우저(Chrome / Edge / Firefox / Safari) 가 <dialog> 를 지원합니다 (Baseline).
1. 기본형 구현
<dialog open>
<p>스크립트 안써도 정말 된다구?</p>
<form method="dialog">
<button>OK</button>
</form>
</dialog>
실행화면
ok버튼 클릭시 창이 닫힌다.
2. 오버레이 배경추가
<dialog>
<button autofocus>Close</button>
<p>이번엔 배경색 넣기</p>
</dialog>
<button>얍얍</button>
::backdrop {
background-image: linear-gradient(
45deg,
magenta,
rebeccapurple,
dodgerblue,
green
);
opacity: 0.75;
}
::backdrop 선택자는 dialog 요소의 배경색을 선택할수 있다.
아주 약간의 자바스크립트를 추가한다
const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");
// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
dialog.showModal();
});
// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
dialog.close();
});
showModal(), close() 는 dialog API 가 제공하는 메서드이다.
실행화면
3. dialog API 정리
| 메서드 / 속성 | 설명 |
|---|---|
dialog.show() |
비모달 로 열기 (배경 클릭 가능, 포커스 트랩 없음) |
dialog.showModal() |
모달 로 열기 (배경 클릭 막힘, 포커스 트랩, ESC 닫기) |
dialog.close(returnValue?) |
닫기. 폼 결과를 인자로 전달 가능 |
dialog.returnValue |
마지막 close() 에 전달된 값 |
<form method="dialog"> |
안의 submit 버튼이 dialog 를 닫음 (스크립트 불필요) |
::backdrop 의사 요소 |
showModal() 일 때만 나타나는 배경 — CSS 로 스타일링 |
1. 이벤트
close— dialog 가 닫힐 때cancel— ESC 키로 닫힐 때 (이 단계에서preventDefault()로 막을 수 있음)
4. 2025년 추가 기능 — Light Dismiss
closedby 속성이 추가되어 바깥 영역 클릭으로 닫기 를 선언적으로 지정할 수 있습니다.
<dialog closedby="any">…</dialog>
closedby 값 |
동작 |
|---|---|
any |
바깥 클릭 / ESC / close() 모두로 닫힘 |
closerequest |
ESC 또는 close request 로만 닫힘 (기본 모달과 유사) |
none |
명시적 close() 호출로만 닫힘 |
HTMLDialogElement.requestClose() 메서드도 함께 추가됨 — cancel 이벤트를 발생시키며 닫기 요청을 보냅니다.
⚠️ closedby / requestClose() 는 비교적 신규 기능 — 사용 전 Can I Use 에서 대상 브라우저 지원 확인 권장.