HTML dialog Tag

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>

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 : <dialog open>...</dialog> <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>

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>

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.