From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/vi/web/html/element/dialog/index.html | 163 ++++++++++++++++++++++++++++ 1 file changed, 163 insertions(+) create mode 100644 files/vi/web/html/element/dialog/index.html (limited to 'files/vi/web/html/element/dialog/index.html') diff --git a/files/vi/web/html/element/dialog/index.html b/files/vi/web/html/element/dialog/index.html new file mode 100644 index 0000000000..d6d63404b4 --- /dev/null +++ b/files/vi/web/html/element/dialog/index.html @@ -0,0 +1,163 @@ +--- +title: ': Phần tử Hộp thoại' +slug: Web/HTML/Element/dialog +tags: + - Dialog + - HTML + - Hộp thoại + - Phần tử + - Phần tử HTML tương tác được + - Tham khảo + - Thử nghiệm + - Web +translation_of: Web/HTML/Element/dialog +--- +

Phần tử HTML <dialog> đại diện cho một hộp thoại hoặc một component tương tác được, chẳng hạn như giao diện cửa sổ hoặc khảo sát.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Loại nội dungFlow content, sectioning root
Nội dung cho phépFlow content
Thẻ được phép bỏ{{no_tag_omission}}
Thẻ cha cho phépAny element that accepts flow content
ARIA role cho phép{{ARIARole("alertdialog")}}
Giao diện lập trình DOM{{domxref("HTMLDialogElement")}}
+ +

Thuộc tính

+ +

Phần tử này có các thuộc tính chung. Thuộc tính tabindex không được phép sử dụng với phần tử <dialog>.

+ +
+
{{htmlattrdef("open")}}
+
Cho biết hộp thoại có được kích hoạt và sẵn sàng tương tác hay không. Khi thuộc tính open này không được bật (không có trong thẻ), hộp thoại sẽ không hiện ra cho người dùng.
+
+ +

Lưu ý khi sử dụng

+ + + +

Ví dụ

+ +

Ví dụ đơn giản

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

Ví dụ nâng cao

+ +

Trong ví dụ này, một hộp thoại sẽ hiện ra với một form bên trong khi mà nút "Update details" được bấm.

+ +

HTML

+ +
<!-- Simple pop-up dialog box containing a form -->
+<dialog id="favDialog">
+  <form method="dialog">
+    <p><label>Favorite animal:
+      <select>
+        <option></option>
+        <option>Brine shrimp</option>
+        <option>Red panda</option>
+        <option>Spider monkey</option>
+      </select>
+    </label></p>
+    <menu>
+      <button>Cancel</button>
+      <button>Confirm</button>
+    </menu>
+  </form>
+</dialog>
+
+<menu>
+  <button id="updateDetails">Update details</button>
+</menu>
+
+ +

JavaScript

+ +
(function() {
+  var updateButton = document.getElementById('updateDetails');
+  var favDialog = document.getElementById('favDialog');
+
+  // “Update details” button opens the <dialog> modally
+  updateButton.addEventListener('click', function() {
+    favDialog.showModal();
+  });
+})();
+
+ +

Kết quả nhận được

+ +

{{EmbedLiveSample("Ví_dụ_nâng_cao", "100%", 300)}}

+ +

Nút submit nào được bấm có thể được xác định với returnValue của favDialog.

+ +

Đặc tả

+ + + + + + + + + + + + + + + + + + + + + +
Đặc tảTrạng tháiGhi chú
{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML5.2')}}Định nghĩa ban đầu.
+ +

Trình duyệt hỗ trợ

+ + + +

{{Compat("html.elements.dialog")}}

+ +

Polyfill

+ +

Dùng polyfill sau để hỗ trợ <dialog> cho các trình duyệt cũ:

+ +

dialog-polyfill

+ +

Xem thêm

+ + + +
{{HTMLRef}}
-- cgit v1.2.3-54-g00ecf