Membuat LightBox Sederhana dengan jQuery CSS

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

class .bg disini 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 class .bg dan class .modal dengan menambahkan display:none yang bertujuan untuk menyembunyikan kotak modal dan bg.

berikan aksi pada tombol tersebut dimana untuk menampilkan lightbox ketika tombol di klik. Tambahkan syntax jquery sebagai berikut

jangan lupa hubungkan dengan library jquerynya.

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