<dialog>: The Dialog element

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

 

Kategori konten Alur Konten, bagian akar
Konten yang diijinkan Alur konten
Penanda kesalahan None, both the starting and ending tag are mandatory.
Tingkatan yang diijinkan Setiap elemen yang menerima alur konten
Peran Aria yang diijinkan alertdialog
Antarmuka DOM HTMLDialogElement

Atribut

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

open
Menandakan bahwa dialog telah aktif dan dapat digunakan. Ketika atribut open belum diatur, maka dialog tidak akan tampil kepada pengguna.

Catatan penggunaan

 

  • Elemen <form> dapat diintegrasikan didalam dialog dengan menspesifikasikannya menggunakan atribut method="dialog". Ketika isi form dikirim, dialog akan tertutup dengan sebuah atribut returnValue dari value dari tombol kirim yang digunakan.
  • Elemen-pseudo CSS ::backdrop dapat digunakan untuk menghiasi elemen <dialog>, sebagai contoh untuk membuat redup konten yand tidak boleh diakses saat dialog sedang aktif.

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

Spesifikasi

Kompatibilitas browser

BCD tables only load in the browser

Polyfills

Sertakan polyfill ini untuk menyediakan dukungan terhadap browser lawas

dialog-polyfill

Lihat juga