HTMLDialogElement

在此页

特性
方法
事件
范例
规范
浏览器兼容性
另请参阅
相关话题

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

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

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="../API/HTMLDialogElement" target="_top"><rect x="1" y="1" width="170" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="86" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLDialogElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

特性

继承的特性来自其父级， HTMLElement .

HTMLDialogElement.open: 布尔 反射 open HTML attribute, indicating whether the dialog is available for interaction.
HTMLDialogElement.returnValue: DOMString that sets or returns the return value for the dialog.

方法

继承方法来自其父级 HTMLElement .

HTMLDialogElement.close(): Closes the dialog. An optional DOMString may be passed as an argument, updating the returnValue of the the dialog.
HTMLDialogElement.show()
HTMLDialogElement.showModal()

事件

close: Fired when the dialog is closed.
也可用凭借 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 取消 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 ).

规范

规范	状态	注释
HTML 实时标准 The definition of 'HTMLDialogElement' in that specification.	实时标准
HTML 5.2 The definition of '<dialog>' in that specification.	推荐	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	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 ). 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 ). 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 ). 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 ). 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 ). 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 ). 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 ). 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 ). 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 ). 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 ). 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 ). 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 ). 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> .

元数据

最后修改： May 26, 2020

在此页

特性

方法

事件

范例

规范

浏览器兼容性

图例

另请参阅

相关话题