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

Spesifikasi Status Keterangan
HTML Living Standard
The definition of '<dialog>' in that specification.
Living Standard  
HTML 5.2
The definition of '<dialog>' in that specification.
Recommendation Initial definition

Kompatibilitas browser

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support37 No No1 No24 No
open37 No No1 No24 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support3737 No No1 No No ?
open3737 No No1 No No ?

1. See bug 840640.

Polyfills

Sertakan polyfill ini untuk menyediakan dukungan terhadap browser lawas

dialog-polyfill

Lihat juga

Tag Dokumen dan Kontributor

Tag: 
 Kontributor untuk laman ini: jpmakangiras
 Terakhir diperbarui oleh: jpmakangiras,