From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/htmldialogelement/index.html | 247 +++++++++++++++++++++++ 1 file changed, 247 insertions(+) create mode 100644 files/zh-cn/web/api/htmldialogelement/index.html (limited to 'files/zh-cn/web/api/htmldialogelement/index.html') diff --git a/files/zh-cn/web/api/htmldialogelement/index.html b/files/zh-cn/web/api/htmldialogelement/index.html new file mode 100644 index 0000000000..95a1784e3a --- /dev/null +++ b/files/zh-cn/web/api/htmldialogelement/index.html @@ -0,0 +1,247 @@ +--- +title: HTMLDialogElement +slug: Web/API/HTMLDialogElement +tags: + - API + - HTML DOM + - Interface + - Reference +translation_of: Web/API/HTMLDialogElement +--- +
{{ APIRef("HTML DOM") }}
+ +

{{ SeeCompatTable() }}

+ +

HTMLDialogElement接口提供操作{{HTMLElement("dialog")}} 元素的方法.。此接口的方法和属性继承自 {{domxref("HTMLElement")}} 接口。

+ +

属性

+ +

继承自父接口， {{domxref("HTMLElement")}}。

+ + + + + + + + + + + + + + + + + + + + + +
名称类型描述
open{{domxref("Boolean")}}来自{{ htmlattrxref("open", "dialog") }} HTML 属性, 表示这个对话框可以进行互动.
returnValue{{domxref("DOMString")}}用户获取对话框的值
+ +

方法

+ +

继承自父接口 ， {{domxref("HTMLElement")}}。

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
名称和参数类型描述
close() {{ HTMLVersionInline(5) }}void关闭对话框。 可选传入类型为{domxref("DOMString")}}的参数，用来更新对话框的returnValue。
show() {{ HTMLVersionInline(5) }}void非模式化的显示这个对话框, 即：打开这个对话框之后依然可以和其他内容进行交互。 可选传入类型为 {{domxref("Element")}} 或者 {{domxref("MouseEvent")}} 的参数，用来定义对话框的显示位置。
showModal() {{ HTMLVersionInline(5) }}void模式化的显示这个对话框， 并且将会至于所有其他对话框的顶层（屏蔽其他对话框的交互）。 可选传入类型为{{domxref("Element")}} 或者 {{domxref("MouseEvent")}} 的参数， 用来定义对话框的显示位置。
+ +

Examples

+ +

Example 1

+ +
<!-- Anchor point example -->
+<dialog id="bronteDialog">
+  <p>That was part of a poem by Emily Brontë!</p>
+</dialog>
+
+<blockquote>
+  <p>"Then art thou glad to seek repose?<br>
+  Art glad to leave the sea,<br>
+  And <strong id="anchor">anchor</strong> all thy weary woes<br>
+  In calm Eternity?"</p>
+</blockquote>
+
+<menu>
+  <button id="showDialogButton">Show dialog</button>
+</menu>
+
+<script>
+  (function() {
+    var showDialogButton = document.getElementById('showDialogButton');
+
+    // 'Show dialog' button opens dialog, anchored at third line of quote
+    showDialogButton.addEventListener('click', function() {
+      var bronteDialog = document.getElementById('bronteDialog');
+      var anchorPoint = document.getElementById('anchor');
+      bronteDialog.show(anchorPoint);
+    });
+
+  })();
+</script>
+
+ +

Example 2

+ +
<!-- 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');
+
+    // Update button opens a modal dialog
+    updateButton.addEventListener('click', function() {
+      document.getElementById('favDialog').showModal();
+    });
+
+    // Form cancel button closes the dialog box
+    cancelButton.addEventListener('click', function() {
+      document.getElementById('favDialog').close();
+    });
+
+  })();
+</script>
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML5.1')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support37{{CompatNo()}} {{bug(840640)}}{{CompatNo()}}24{{CompatNo()}}
Anchor points{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
特性AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
Anchor points{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
+
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf