이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

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 최초 정의

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 37Edge No support NoFirefox Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes See bug 840640.
Disabled 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.
IE No support NoOpera Full support 24Safari No support NoWebView Android Full support 37Chrome Android Full support 37Edge Mobile No support NoFirefox Android Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes See bug 840640.
Disabled 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.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android Full support Yes
openChrome Full support 37Edge No support NoFirefox Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes See bug 840640.
Disabled 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.
IE No support NoOpera Full support 24Safari No support NoWebView Android Full support 37Chrome Android Full support 37Edge Mobile No support NoFirefox Android Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes See bug 840640.
Disabled 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.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Polyfills

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

dialog-polyfill

See also

문서 태그 및 공헌자

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