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.