HTML <dialog>: 대화상자 요소

HTML <dialog> 요소는 대화상자와 경고창 등 상호작용 가능한 컴포넌트를 나타냅니다.

<button id="dialog-opener" type="button">장바구니 열기</button>

<dialog id="dialog">
  <ul>
    <li>사과</li>
    <li>옥수수</li>
    <li>파인애플</li>
  </ul>
  <button id="dialog-closer" type="button">닫기</button>
</dialog>

dialog {
  width: 200px;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 2px 6px #0008;
}

dialog::backdrop {
  background: #fff8;
}

ul {
  margin: 0;
}

document.getElementById('dialog-opener').addEventListener('click', function() {
  document.getElementById('dialog').showModal()
})

document.getElementById('dialog-closer').addEventListener('click', function() {
  document.getElementById('dialog').close()
})

불러오는 중...

특성

전역 특성을 포함합니다.

<dialog>에 tabindex를 사용하면 안됩니다.

open: 불리언 특성입니다. 대화상자가 열려서 상호작용 가능한 상태인지 나타냅니다.

접근성 고려사항

일부 보조 기술은 아직도 <dialog> 요소를 완전히 지원하지 않습니다. 따라서 사용자들이 대화상자의 내용을 읽지 못하거나, 제대로 사용하지 못할 수 있습니다. 따라서 지원 상황이 개선되기 전에는 서드파티 라이브러리를 사용하는 편이 좋을 수도 있습니다.

사용 일람

<form> 요소에 method="dialog" 특성을 지정하면 양식 제출과 함께 대화상자가 닫힙니다. 이때 대화상자 DOM 객체의 returnValue 속성 속성은 양식을 제출할 때 사용한 <button>의 value 특성 값으로 설정됩니다.
HTMLModalDialog.showModal()로 <dialog>를 열었을 때 배경을 어둡거나 흐리게 만들어야 할 땐 CSS ::backdrop 의사 요소를 사용하세요.

명세

HTML Living Standard

브라우저 호환성

	IE	Edge	Chrome	Safari	Firefox	iOS Safari	Android WebView	Android Chrome	Android Firefox	Samsung Internet
`dialog`
`open`

MDN browser-compat-data