현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

HTML <dialog> 요소는 inspector나 window와 같은 dialog 박스나 다른 interactive한 컴포넌트를 나타낸다.

콘텐트 범주 플로우컨텐츠, 섹션 계층
허용 콘텐트 플로우 컨텐츠
태그 생략 None, both the starting and ending tag are mandatory.
허용 부모 플로우 컨텐츠 를 수용하는 모든 요소
허용 ARIA 규칙 alertdialog
DOM 인터페이스 HTMLDialogElement

속성

이 요소는 전역 속성을 갖고 있다. tabindex 속성은 <dialog> 요소에서 사용되어서는 안 된다.

open
대화 상자가 사용자에게 표시되는지 여부를 결정하는 요소이다. open 요소가 정의되지 않은 경우, 사용자에게 보여질 수 없다.

참고

  • <form> 요소는 요청을 전송할 경우 value 속성에 값이 부여된 전송 버튼을 사용하여 전송 이벤트의 returnValue 속성과 일치한 경우, method="dialog" 속성이 정의된 양식 요소에 통합할 수 있다. 
  • ::backdrop CSS 가상 요소를 <dialog> 요소 안에 사용할 수 있다. 예를 들면  모달 대화 상자가 활성화되어 있는 동안 접근할 수 없는 요소를 흐리게 표시하기 위한 용도에 사용할 수 있다.

예제

간단한 예제

<dialog open>
  <p>여러분 안녕하세요!</p>
</dialog>

고급 예제

이 예제는 "상세 업데이트" 버튼을 클릭할 경우 양식을 포함한 팝업 대화 상자를 열게 된다.

HTML

<!-- 간단한 양식이 포함된 팝업 대화 상자 -->
<dialog open id="favDialog">
  <form method="dialog">
    <section>
      <p><label for="favAnimal">좋아하는 동물:</label>
      <select id="favAnimal">
        <option></option>
        <option>바다새우</option>
        <option>레드팬더</option>
        <option>거미원숭이</option>
      </select></p>
    </section>
    <menu>
      <button id="cancel" type="reset">취소</button>
      <button type="submit">확인</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">상세 업데이트</button>
</menu>

JavaScript

(function() {
  var updateButton = document.getElementById('updateDetails');
  var cancelButton = document.getElementById('cancel');
  var favDialog = document.getElementById('favDialog');

  // 갱신 버튼으로 모달 대화 상자를 표시한다.
  updateButton.addEventListener('click', function() {
    favDialog.showModal();
  });

  // 양식의 취소 버튼으로 대화 상자를 닫는다.
  cancelButton.addEventListener('click', function() {
    favDialog.close();
  });
})();

결과

명세

Specification Status Comment
HTML Living Standard
The definition of '<dialog>' in that specification.
Living Standard  
HTML 5.1
The definition of '<dialog>' in that specification.
Recommendation 최초 정의

브라우저 호환성

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support37 No531 2 No24 No
open37 No531 2 No24 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support3737 No531 2 No No Yes
open3737 No531 2 No No Yes

1. See bug 840640.

2. From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Polyfills

구 브라우저에 대한 호환 라이브러리가 제공된다. 

dialog-polyfill

See also

문서 태그 및 공헌자

이 페이지의 공헌자: composite, Luavis
최종 변경: composite,