From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/id/web/html/element/dialog/index.html | 165 ++++++++++++++++++++++++++++ 1 file changed, 165 insertions(+) create mode 100644 files/id/web/html/element/dialog/index.html (limited to 'files/id/web/html/element/dialog/index.html') diff --git a/files/id/web/html/element/dialog/index.html b/files/id/web/html/element/dialog/index.html new file mode 100644 index 0000000000..ac51fecd40 --- /dev/null +++ b/files/id/web/html/element/dialog/index.html @@ -0,0 +1,165 @@ +--- +title: ': The Dialog element' +slug: Web/HTML/Element/dialog +translation_of: Web/HTML/Element/dialog +--- +

Elemen <dialog> menampilkan sebuah kotak dialog atau komponen interaktif lainnya seperti halnya inspektor atau jendela.

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Kategori kontenAlur Konten, bagian akar
Konten yang diijinkanAlur konten
Penanda kesalahan{{no_tag_omission}}
Tingkatan yang diijinkanSetiap elemen yang menerima alur konten
Peran Aria yang diijinkan{{ARIARole("alertdialog")}}
Antarmuka DOM{{domxref("HTMLDialogElement")}}
+ +

Atribut

+ +

Elemen ini memiliki atribut global. Penggunaan atribut tabindex harus dihindari pada elemen <dialog> .

+ +
+
{{htmlattrdef("open")}}
+
Menandakan bahwa dialog telah aktif dan dapat digunakan. Ketika atribut open belum diatur, maka dialog tidak akan tampil kepada pengguna.
+
+ +

Catatan penggunaan

+ +

 

+ + + +

Contoh

+ +

Contoh sederhana

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

Contoh lanjutan

+ +

Pada contoh ini akan terbuka kotak dialog saat tombol "Update details" diklik.

+ +

HTML

+ +
<!-- Simple pop-up dialog box, containing a form -->
+<dialog open id="favDialog">
+  <form method="dialog">
+    <section>
+      <p><label for="favAnimal">Favorite animal:</label>
+      <select id="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>
+
+ +

JavaScript

+ +
(function() {
+  var updateButton = document.getElementById('updateDetails');
+  var cancelButton = document.getElementById('cancel');
+  var favDialog = document.getElementById('favDialog');
+
+  // Update button opens a modal dialog
+  updateButton.addEventListener('click', function() {
+    favDialog.showModal();
+  });
+
+  // Form cancel button closes the dialog box
+  cancelButton.addEventListener('click', function() {
+    favDialog.close();
+  });
+})();
+
+ +

Hasil

+ +

{{EmbedLiveSample("Contoh_lanjutan", "100%", 300)}}

+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKeterangan
{{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')}}Initial definition
+ +

Kompatibilitas browser

+ + + +

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

+ +

Polyfills

+ +

Sertakan polyfill ini untuk menyediakan dukungan terhadap browser lawas

+ +

dialog-polyfill

+ +

Lihat juga

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