<dialog>: 대화 상자 요소

HTML <dialog> 요소는 닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타냅니다.

콘텐츠 카테고리 플로우 콘텐츠, 구획 루트.
가능한 콘텐츠 플로우 콘텐츠.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 alertdialog
DOM 인터페이스 HTMLDialogElement

특성

이 요소는 전역 특성을 포함합니다.

tabindex 특성을 <dialog> 요소에 사용해서는 안됩니다.

open
대화 상자가 활성 상태이며 상호작용할 수 있음을 나타냅니다. open 특성이 없을 때 대화 상자가 사용자에게 보여서는 안됩니다.

사용 일람

  • method="dialog" 특성을 사용한 <form> 요소는 제출 시 대화 상자를 닫습니다. 이 때, 대화 상자의 returnValue 속성은 양식을 제출할 때 사용한 버튼의 value으로 설정됩니다.
  • CSS ::backdrop 의사 요소를 사용하면, HTMLDialogElement.showModal() 메서드를 사용해 활성화한 <dialog> 요소의 뒤에 스타일을 적용할 수 있습니다. 예를 들면, 모달 대화 상자가 활성화되어 있는 동안 접근할 수 없는 뒤쪽 요소를 어둡게 만들 때 사용합니다.

예제

간단한 예제

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

고급 예제

다음 예제는 "상세정보 업데이트" 버튼을 클릭할 경우 양식을 포함한 팝업 대화 상자를 엽니다.

HTML

<!-- 간단한 양식을 포함한 팝업 대화 상자 -->
<dialog id="favDialog">
  <form method="dialog">
    <p><label>좋아하는 동물:
      <select>
        <option></option>
        <option>아르테미아</option>
        <option>레서판다</option>
        <option>거미원숭이</option>
      </select>
    </label></p>
    <menu>
      <button value="cancel">취소</button>
      <button id="confirmBtn" value="default">확인</button>
    </menu>
  </form>
</dialog>

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

<output aria-live="polite"></output>

JavaScript

var updateButton = document.getElementById('updateDetails');
var favDialog = document.getElementById('favDialog');
var outputBox = document.getElementsByTagName('output')[0];
var selectEl = document.getElementsByTagName('select')[0];
var confirmBtn = document.getElementById('confirmBtn');

// “Update details” button opens the <dialog> modally
updateButton.addEventListener('click', function onOpen() {
  if (typeof favDialog.showModal === "function") {
    favDialog.showModal();
  } else {
    alert("The <dialog> API is not supported by this browser");
  }
});
// "Favorite animal" input sets the value of the submit button
selectEl.addEventListener('change', function onSelect(e) {
  confirmBtn.value = selectEl.value;
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
favDialog.addEventListener('close', function onClose() {
  outputBox.value = favDialog.returnValue + " button clicked - " + (new Date()).toString();
});

결과

명세

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 AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
dialogChrome 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 37Firefox 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 Full support 24Safari iOS No support NoSamsung Internet Android Full support 3.0
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 37Firefox 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 Full support 24Safari iOS No support NoSamsung Internet Android Full support 3.0

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.

폴리필

지원하지 않는 브라우저에서 <dialog>를 사용하려면 dialog-polyfill을 추가하세요.

같이 보기