W3.CSSLesson 49Preview gratis
W3.CSS Modal
Lesson ini bagian dari W3.CSS · Semua level
Ringkasan
Modal adalah jendela dialog yang melayang di atas halaman dan menuntut perhatian pengguna. Struktur W3.CSS terdiri dari .w3-modal sebagai lapisan luar dan .w3-modal-content sebagai kotak isinya. Modal disembunyikan secara bawaan lalu dibuka lewat JavaScript dengan mengubah nilai display menjadi block.
Poin kunci
- .w3-modal membungkus seluruh area overlay, .w3-modal-content berisi dialog
- Modal tersembunyi secara default dan dibuka lewat JavaScript
- Tutup dengan tombol silang atau klik pada area overlay
- .w3-animate-zoom memberi efek masuk yang halus
- Sertakan role="dialog" dan aria-modal="true" untuk aksesibilitas
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.