Penjelasan HTML dialog
:
HTML
dialog
Tag - belajar html <dialog>
, element dialog
mempunyai definisi sebagai element pembuat kotak dialog atau popup serta boxs modal pada halaman web.
Dalam keadaan default tanpa sematan attribute, browser yang support element
<dialog>
akan ditampilkan menjadi tidak terlihat, tindakan DOM element mungkin diperlukan untuk menampilkannya.
Contoh html element <dialog>
<dialog>
isi konten
</dialog>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <dialog> isi konten </dialog> <p> Penggunaan javascript diperlukan, untuk menampilkan isi element dialog. </p> </body> </html>
Attributes :
Atribut HTML Tag
<dialog>
:Attribute | Value | Deskripsi |
---|---|---|
open |
open |
Menentukan apakah konten atau element html yang ada didalam tag <dialog> secara default akan terlihat.Attribute ini bersifat boolean, artinya nilai atau value dari attribute ini bisa ditulis maupun tidak Misal :
|
Contoh :
<dialog open="open">
<h3>Petugas hari ini adalah :</h3>
<ul>
<li>Andi</li>
<li>Monica</li>
<li>Nova</li>
</ul>
</dialog>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <dialog open="open"> <h3>Petugas hari ini adalah :</h3> <ul> <li>Andi</li> <li>Monica</li> <li>Nova</li> </ul> </dialog> </body> </html>
Contoh html element <dialog>
Contoh berikut melibatkan komponen javascript, untuk mengontrol element
<dialog>
.
<div>
siapa petugas menyapu hari ini
<button onclick="bukaDialog();">Lihat</button>
</div>
<dialog id="demo">
<h3>Petugas hari ini adalah :</h3>
<ul>
<li>Andi</li>
<li>Monica</li>
<li>Nova</li>
</ul>
<button onclick="tutupDialog();">Tutup Dialog</button>
</dialog>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <div> siapa petugas menyapu hari ini <button onclick="bukaDialog();">Lihat</button> </div> <dialog id="demo"> <h3>Petugas hari ini adalah :</h3> <ul> <li>Andi</li> <li>Monica</li> <li>Nova</li> </ul> <button onclick="tutupDialog();">Tutup Dialog</button> </dialog> <script> //ini untuk membuka dialog function bukaDialog(){ document.getElementById('demo').showModal(); } //ini untuk menutup dialog function tutupDialog(){ document.getElementById('demo').close(); } </script> </body> </html>
Baca dulu :
Harap cek kembali table browser support untuk element ini.
Global Attributes:
Element
<dialog>
mencakup Global Attributes HTML.
Event Attributes:
Element
<dialog>
mencakup Event Attributes HTML.
Browser Support :
Desktop
Chrome | 37 |
---|---|
Safari | - |
Firefox | 53 |
Opera | 24 |
IE | - |
Edge | - |
Mobile
Android Webview | 37 |
---|---|
Chrome Android | 37 |
Edge Mobile | - |
Firefox Android | 53 |
Opera Android | - |
iOs Safari | - |
Samsung Internet | Ya |
Default CSS :
Browser yang support dengan element
<dialog>
, biasanya mempunyai nilai default :
dialog:not([open]) {
display: none;
}
css diatas berarti element
dialog
tanpa attribute open
mempunyai nilai display : none
.