Pada Kesempatan kali ini saya akan membahas cara membuat lightbox sederhana dengan JQuery dan CSS. Apa saja yang dibutuhkan untuk membuat lightbox ? yang pertama adalah library JQuery, Struktur HTML dan CSS.
langsung saja buat sebuah HTML dengan elemen kotak seperti modal untuk lightboxnya dan beri nama belajar-lightbox.html
element bg di sini berguna untuk memblock atau mendisable pada element lainnya ketika modal sedang di tampilkan. selanjutnya temen temen buat sebuah tombol yang berfungsi untuk menampilkan lightbox saat tombol tersebut di klik.
kemudian berikan css-nya dan sembunyikan elemen bg dan elemen modal dengan menambahkan display:none yang bertujuan untuk menyembunyikan kotak modal dan bg.
berikan aksi pada tombol untuk menampilkan lightbox ketika tombol di klik. Tambahkan syntax jquery sebagai berikut
jangan lupa hubungkan dengan library jquery.
pada syntax jquery di atas, saya memberi perintah ketika tombol #tombol_buka di klik maka modal dan bg akan di tampilkan sedangkan ketika #tombol_tutup di klik maka modal dan bg akan kembali di sembunyikan.
sekarang temen temen simpan dan jalankan file tersebut pada browser dan klik pada tombol untuk menampilkan lightboxnya
Sekian dulu artikel kali ini. Semoga Bermanfaat