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.

<body>
    <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 src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<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.

1 November 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat