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

Membuat LightBox Sederhana dengan jQuery dan CSS

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.

Membuat LightBox Sederhana dengan jQuery dan CSS

kemudian berikan css-nya dan sembunyikan elemen bg dan elemen modal dengan menambahkan display:none yang bertujuan untuk menyembunyikan kotak modal dan bg.

Membuat LightBox Sederhana dengan jQuery dan CSS

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

Membuat LightBox Sederhana dengan jQuery dan CSS

jangan lupa hubungkan dengan library jquery.

Membuat LightBox Sederhana dengan jQuery dan CSS

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

Membuat LightBox Sederhana dengan jQuery dan CSS

Sekian dulu artikel kali ini. Semoga Bermanfaat

WhatsApp chat