Belajar Element HTML: <dialog>
Tag <dialog> menunjukkan bagian dari aplikasi yang dapat berinteraksi dengan pengguna untuk melakukan tugas.
Misalnya kotak dialog, inspektur, atau jendela.
Elemen <dialog> memiliki atribut open yang menetapkan elemen menjadi “aktif” dan memungkinkan pengguna untuk berinteraksi dengannya.
Jika atribut dihilangkan, kamu harus menggunakan script (seperti Javascript) untuk mengaktifkan dialog agar bisa terbuka dan tertutup sesuai kebutuhan.
Syntax
Tag <dialog> ditulis seperti <dialog id=""></dialog> dengan konten dialog diletakkan diantara tag pembuka dan penutup.
Atribut id dapat digunakan untuk mengaitkan script dengan elemen <dialog>.
Seperti ini:
<dialog id="">
<p>Konten Dialog ...</p>
<button id="hide">Tutup</button>
</dialog>
<dialog open>
<p><q>The world is full of magical things patiently waiting for our wits to grow sharper.</q> - <cite>Bertrand Russell</cite></p>
</dialog><dialog id="dialog1">
<p><q>The world is full of magical things patiently waiting for our wits to grow sharper.</q> - <cite>Bertrand Russell</cite></p>
<button id="hide1">Close</button>
</dialog>
<!-- "Show" button -->
<button id="show1">Show Dialog</button>
<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
(function() {
var dialog1 = document.getElementById('dialog1');
document.getElementById('show1').onclick = function() {
dialog1.show();
};
document.getElementById('hide1').onclick = function() {
dialog1.close();
};
})();
</script>