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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 37Edge No support NoFirefox Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes See bug 840640.
Disabled From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari No support NoWebView Android Full support 37Chrome Android Full support 37Edge Mobile No support NoFirefox Android Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes See bug 840640.
Disabled From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android Full support Yes
openChrome Full support 37Edge No support NoFirefox Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes See bug 840640.
Disabled From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari No support NoWebView Android Full support 37Chrome Android Full support 37Edge Mobile No support NoFirefox Android Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes See bug 840640.
Disabled From version 53: this feature is behind the dom.dialog_element.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Polyfills

Sertakan polyfill ini untuk menyediakan dukungan terhadap browser lawas

dialog-polyfill

Lihat juga

Tag Dokumen dan Kontributor

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