Cara Membuat Panel Lightbox dengan jQuery
Kita semua tahu bahwa jQuery merupakan sebuah library yang sangat membantu sekali dalam menunjang kebutuhan suatu desain web, didalam library jQuery telah terdapat fungsi-fungsi animasi dan efek-efek yang bisa kita pakai. Misalnya saja kita ingin membuat sebuah animasi fadeIn, fadeOut, toggle dan efek-efek lainnya. Nah, berbicara tentang efek dan animasi berikut ini akan saya share mengenai bagaimana cara membuat panel lightbox dengan jQuery.
Pada kasus ini, panel lightbox akan dibuat dengan fungsi yang terdapat pada library jQuery yakni fadeIn dan fadeOut. Untuk lebih jelasnya silahkan simak langkah-langkah berikut ini.
Silahkan ketikan kode HTML5 berikut ini untuk struktur awal panel lightbox nya.
<a id="button" href="#">Show Panel Box</a>
<div id="box-open">
<h2>This is Panel Box</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p align="center"><a id="box-close" href="#">Close this Panel</a></p>
</div>
</body>
setelah membuat struktur diatas, selanjutnya kita akan desain terlebih dahulu panel lightbox dengan kode CSS3 berikut ini.
body{
margin:150px 0 0 0;
text-align:center;
background: #2c3e50;
}
h2{
font-size: 32px;
color: #d35400;
}
a{
text-decoration: none;
color: white;
font-size: 18px;
background: #d35400;
padding: 10px;
}
#lightbox {
display:none;
background: rgba(0,0,0,0.8);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#box-open {
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #d35400;
z-index:999;
}
Selanjutnya, barulah kita akan membuat fungsi animasi supaya panel lightbox bisa berjalan dengan baik, untuk itu ketikan kode jQuery berikut ini.
<script type="text/javascript">
$(document).ready(function(){
$("a#button").click(function(){
$("#lightbox, #box-open").fadeIn(300);
});
$("a#box-close").click(function(){
$("#lightbox, #box-open").fadeOut(300);
})
});
</script>
Setelah semua kode diatas telah diketikan semua, simpan filenya kemudian buka pada browser dan lihat hasilnya, maka akan tampil tombol dan jika kalian klik tombol tersebut akan tampil sebuah efek yang telah kita buat diatas yakni efek fadeIn dan fadeOut.
Bagaimana, cukup mudah bukan membuat efek sederhana dengan jQuery ? Baik cukup sekian tutorial mengenai cara membuat panel lightbox dengan jQuery, semoga bermanfaat dan selamat mencoba.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
