tRikSonic
Tema

HTML dialog Tag

Terakhir diperbarui : 24 Mei 2018 - 21.10

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.
background html
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 :
  1. <dialog open>...</dialog>
  2. <dialog open="open">...</details>
Contoh nomor 1 dan nomor 2 bersifat sama.

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

Chrome37
Safari-
Firefox53
Opera24
IE-
Edge-

Mobile

Android Webview37
Chrome Android37
Edge Mobile-
Firefox Android53
Opera Android-
iOs Safari-
Samsung InternetYa

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.
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.