ImagesLesson 59Preview gratis
Modal Images
Lesson ini bagian dari How To · Semua level
Ringkasan
Modal image memperbesar gambar di atas lapisan gelap saat thumbnail diklik, tanpa berpindah halaman. Pengguna dapat menutup tampilan besar lewat tombol silang atau klik area luar. Pola ini cocok untuk galeri produk, portofolio, dan pratinjau foto.
Poin kunci
- Modal memakai position: fixed dan inset: 0 agar menutupi seluruh viewport.
- Latar rgba gelap membantu gambar besar menonjol.
- Gambar di dalam modal dibatasi max-width dan max-height agar tidak terpotong.
- Klik pada latar modal dapat ditutup dengan memeriksa event.target.
- cursor: zoom-in memberi petunjuk bahwa gambar dapat diperbesar.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.