MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey-2018-1

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

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

Content categories 플로우컨텐츠, sectioning root
Permitted content 플로우 컨텐츠
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content
Permitted ARIA roles alertdialog
DOM interface HTMLDialogElement

속성

이 요소는 전역 속성을 갖고 있다. The tabindex attribute must not be used on the <dialog> element.

open
Indicates that the dialog is active and available for interaction. When the open attribute is not set, it shouldn't be shown to the user.

참고

  • <form> elements can be integrated within a dialog by specifying them with the attribute method="dialog". When such a form is submitted, the dialog is closed with a returnValue attribute set to the value of the submit button used.
  • The ::backdrop CSS pseudo-element can be used to style behind a <dialog> element, for example to dim inaccessible content whilst a modal dialog is active.

예제

Simple example

<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

Advanced example

This example opens a pop-up dialog box containing a form when the "Update details" button is clicked.

HTML

<!-- Simple pop-up dialog box, containing a form -->
<dialog open id="favDialog">
  <form method="dialog">
    <section>
      <p><label for="favAnimal">Favorite animal:</label>
      <select id="favAnimal">
        <option></option>
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      </select></p>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

JavaScript

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

  // Update button opens a modal dialog
  updateButton.addEventListener('click', function() {
    favDialog.showModal();
  });

  // Form cancel button closes the dialog box
  cancelButton.addEventListener('click', function() {
    favDialog.close();
  });
})();

Result

명세

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 Initial definition

브라우저 호환성

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support37 No No1 No24 No
open37 No No1 No24 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support3737 No No1 No No No
open3737 No No1 No No No

1. See bug 840640.

Polyfills

Include this polyfill to provide support for older browsers.  

dialog-polyfill

See also

문서 태그 및 공헌자

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