HTMLDialogElement

这是 实验性技术
检查 浏览器兼容性表格 在生产中使用这之前。

HTMLDialogElement interface provides methods to manipulate <dialog> elements. It inherits properties and methods from the HTMLElement 接口。

特性

Inherits properties from its parent, HTMLElement .

HTMLDialogElement.open
A Boolean reflecting the open HTML attribute, indicating whether the dialog is available for interaction.
HTMLDialogElement.returnValue
A DOMString that sets or returns the return value for the dialog.

方法

Inherits methods from its parent, HTMLElement .

HTMLDialogElement.close()
Closes the dialog. An optional DOMString may be passed as an argument, updating the returnValue of the the dialog.
HTMLDialogElement.show()
Displays the dialog modelessly, i.e. still allowing interaction with content outside of the dialog.
HTMLDialogElement.showModal()
Displays the dialog as a modal, over the top of any other dialogs that might be present. Interaction outside the dialog is blocked.

Events

close
Fired when the dialog is closed.
Also available via the onclose 特性。

范例

The following example shows a simple button that, when clicked, opens a <dialog> containing a form via the HTMLDialogElement.showModal() function. From there you can click the Cancel button to close the dialog (via the HTMLDialogElement.close() function), or submit the form via the submit button.

  <!-- Simple pop-up dialog box, containing a form -->
  <dialog id="favDialog">
    <form method="dialog">
      <section>
        <p><label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal" name="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>
  <script>
    (function() {
      var updateButton = document.getElementById('updateDetails');
      var cancelButton = document.getElementById('cancel');
      var dialog = document.getElementById('favDialog');
      dialog.returnValue = 'favAnimal';
      function openCheck(dialog) {
        if(dialog.open) {
          console.log('Dialog open');
        } else {
          console.log('Dialog closed');
        }
      }
      // Update button opens a modal dialog
      updateButton.addEventListener('click', function() {
        dialog.showModal();
        openCheck(dialog);
      });
      // Form cancel button closes the dialog box
      cancelButton.addEventListener('click', function() {
        dialog.close('animalNotChosen');
        openCheck(dialog);
      });
    })();
  </script>
					

注意 : You can find this example on GitHub as htmldialogelement-basic ( see it live also ).

规范

规范 状态 Comment
HTML Living Standard
The definition of 'HTMLDialogElement' in that specification.
实时标准
HTML 5.2
The definition of '<dialog>' in that specification.
Recommendation 初始定义

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
HTMLDialogElement
Chrome 37 Edge 79 Firefox 53
Disabled
53
Disabled
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 Opera Yes Safari No WebView Android No Chrome Android No Firefox Android 53
Disabled
53
Disabled
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 Safari iOS No Samsung Internet Android No
cancel event Chrome Yes Edge 79 Firefox 78 IE No Opera ? Safari No WebView Android No Chrome Android No Firefox Android No Opera Android No Safari iOS No Samsung Internet Android No
close
Chrome 37 Edge 79 Firefox 53
Disabled
53
Disabled
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 Opera Yes Safari No WebView Android No Chrome Android No Firefox Android 53
Disabled
53
Disabled
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 Safari iOS No Samsung Internet Android No
close event Chrome Yes Edge 79 Firefox No IE No Opera ? Safari No WebView Android No Chrome Android No Firefox Android No Opera Android No Safari iOS No Samsung Internet Android No
open
Chrome 37 Edge 79 Firefox 53
Disabled
53
Disabled
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 Opera Yes Safari No WebView Android No Chrome Android No Firefox Android 53
Disabled
53
Disabled
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 Safari iOS No Samsung Internet Android No
returnValue
Chrome 37 Edge 79 Firefox 53
Disabled
53
Disabled
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 Opera Yes Safari No WebView Android No Chrome Android No Firefox Android 53
Disabled
53
Disabled
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 Safari iOS No Samsung Internet Android No
show
Chrome 37 Edge 79 Firefox 53
Disabled
53
Disabled
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 Opera Yes Safari No WebView Android No Chrome Android No Firefox Android 53
Disabled
53
Disabled
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 Safari iOS No Samsung Internet Android No
showModal
Chrome 37 Edge 79 Firefox 53
Disabled
53
Disabled
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 Opera Yes Safari No WebView Android No Chrome Android No Firefox Android 53
Disabled
53
Disabled
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 Safari iOS No Samsung Internet Android No

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
见实现注意事项。
用户必须明确启用此特征。
用户必须明确启用此特征。

另请参阅

  • The HTML element implementing this interface: <dialog> .
  1. HTMLDialogElement
  2. 特性
    1. open
    2. returnValue
  3. 方法
    1. close()
    2. show()
    3. showModal()
  4. Events
    1. cancel
    2. close
  5. Related pages for HTML DOM
    1. BeforeUnloadEvent
    2. DOMStringMap
    3. ErrorEvent
    4. GlobalEventHandlers
    5. HTMLAnchorElement
    6. HTMLAreaElement
    7. HTMLAudioElement
    8. HTMLBRElement
    9. HTMLBaseElement
    10. HTMLBaseFontElement
    11. HTMLBodyElement
    12. HTMLButtonElement
    13. HTMLCanvasElement
    14. HTMLContentElement
    15. HTMLDListElement
    16. HTMLDataElement
    17. HTMLDataListElement
    18. HTMLDivElement
    19. HTMLDocument
    20. HTMLElement
    21. HTMLEmbedElement
    22. HTMLFieldSetElement
    23. HTMLFormControlsCollection
    24. HTMLFormElement
    25. HTMLFrameSetElement
    26. HTMLHRElement
    27. HTMLHeadElement
    28. HTMLHeadingElement
    29. HTMLHtmlElement
    30. HTMLIFrameElement
    31. HTMLImageElement
    32. HTMLInputElement
    33. HTMLIsIndexElement
    34. HTMLKeygenElement
    35. HTMLLIElement
    36. HTMLLabelElement
    37. HTMLLegendElement
    38. HTMLLinkElement
    39. HTMLMapElement
    40. HTMLMediaElement
    41. HTMLMetaElement
    42. HTMLMeterElement
    43. HTMLModElement
    44. HTMLOListElement
    45. HTMLObjectElement
    46. HTMLOptGroupElement
    47. HTMLOptionElement
    48. HTMLOptionsCollection
    49. HTMLOutputElement
    50. HTMLParagraphElement
    51. HTMLParamElement
    52. HTMLPictureElement
    53. HTMLPreElement
    54. HTMLProgressElement
    55. HTMLQuoteElement
    56. HTMLScriptElement
    57. HTMLSelectElement
    58. HTMLShadowElement
    59. HTMLSourceElement
    60. HTMLSpanElement
    61. HTMLStyleElement
    62. HTMLTableCaptionElement
    63. HTMLTableCellElement
    64. HTMLTableColElement
    65. HTMLTableDataCellElement
    66. HTMLTableElement
    67. HTMLTableHeaderCellElement
    68. HTMLTableRowElement
    69. HTMLTableSectionElement
    70. HTMLTemplateElement
    71. HTMLTextAreaElement
    72. HTMLTimeElement
    73. HTMLTitleElement
    74. HTMLTrackElement
    75. HTMLUListElement
    76. HTMLUnknownElement
    77. HTMLVideoElement
    78. HashChangeEvent
    79. History
    80. ImageData
    81. Location
    82. MessageChannel
    83. MessageEvent
    84. MessagePort
    85. Navigator
    86. NavigatorGeolocation
    87. NavigatorID
    88. NavigatorLanguage
    89. NavigatorOnLine
    90. NavigatorPlugins
    91. PageTransitionEvent
    92. Plugin
    93. PluginArray
    94. PopStateEvent
    95. PortCollection
    96. PromiseRejectionEvent
    97. RadioNodeList
    98. Transferable
    99. ValidityState
    100. Window
    101. WindowBase64
    102. WindowEventHandlers
    103. WindowTimers