9. dialog

🔗MDN dialog 요소

<dialog> 는 모달 팝업 을 태그 한 줄로 구현할 수 있는 HTML 요소입니다. ESC 키로 창 닫기, 포커스 트랩, 배경 어둡게 처리(::backdrop) 등을 브라우저가 기본 제공 합니다.

Info: ✅ 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 이벤트를 발생시키며 닫기 요청을 보냅니다.

Info: ⚠️ closedby / requestClose() 는 비교적 신규 기능 — 사용 전 Can I Use 에서 대상 브라우저 지원 확인 권장.