Cara Membuat Pop Up Dengan Jquery

16/01/2019    Shelli Ripati    158     Website

Pop up adalah suatu animasi dinama ketika kita melakukan klik pada objek tertentu maka akan tampil layar atau objek baru dengan posisi berada di paling depan sebuah website. Untuk animasi pop up bisa berupa sebuah gambar atau form input. Dan pada kesempatan kali ini saya akan membahas pop up gambar pada artikel tentang Cara Membuat Pop Up Dengan Jquery.

Langkah pertama Cara Membuat Pop Up Dengan Jquery yaitu saya akan buat struktur htmlnya seperti berikut ini.

<html>

<head>

               <meta charset="UTF-8">

               <title>Document</title>

               <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

               <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

</head>

<style>

               *{padding: 0;margin:0;}

</style>

<body>

               <div class="gallery">

                              <h1>Cara Membuat Popup</h1>

                              <img src="https://imgnooz.com/sites/default/files/wallpaper/animals/56161/tropical-colors-parrot-wallpapers-56161-6214715.jpg" alt="">

                              <img src="https://i.imgur.com/4A3kHML.jpg" alt="">

                              <img src="https://i.pinimg.com/originals/e4/6e/b0/e46eb089eb9e47d82adcec531625d8c9.jpg" alt="">

                              <img src="https://i.pinimg.com/originals/f4/07/6f/f4076f86b05790a0dd75845a311070f6.jpg" alt="">

               </div>

               <div class="container">

               <div class="popup">

                              <i class="fas fa-times-circle" id="close"></i>

                              <div class="imageShow">

                              </div>

               </div>

               </div>

</body>

</html>

Dan jika sudah selesai kita akan buat script jquery untuk memberikan style cssnya seperti script di bawah ini.

// Style Css

     $(".gallery").css({'width':'500px','margin':'auto','text-align':'center'});

     $(".gallery img").css({'width':'100px','height':'50px'});

     $(".container").css({'position':'absolute','top':'0px','display':'none', 'width':'100%', 'height':'100%', 'background':'rgba(0,0,0,0.5)'});

     $(".popup").css({'position':'relative','top':'90px','width':'700px','margin':'auto','border':'10px solid white','z-index':'10000'});

     $("#close").css({'position':'absolute','top':'-15px','right':'-15px','font-size':'20px'});

Jika sudah selesai maka kita lanjutkan untuk membuat fungsi pop up dengan menggunakan jquery, sebagai berikut.

// Show

               $(".gallery img").click(function(){

                              $(".container").fadeIn("slow");

                              var url = $(this).attr('src');

                              $(".imageShow").html('<img src="'+url+'">');

                              $(".imageShow img").css({'width':'100%'})              ;

               })

 

// Close

$("#close").click(function(){

                $(".container").fadeOut("slow");

 })

 

Jika teman-teman perhatikan script di atas, saya sudah membuat dua buah event click dimana event click pertama saya gunakan untuk menampilkan gambar pop up dengan ukuran besar. Dan ketika di klik saya ambil atribut src dengan menggunakan fungsi attr() pada jquery. Dan kemudian src pada gambar yang di klik saya gunakan untuk membuat tag img di dalam div class imageShow dengan lebar gambar 100% dari div class imageShow. Dan untuk event click yang kedua saya buat untuk menutup pop up gambar yang sedang tampil dengan memberikan fadeout pada div class container.

Jika teman-teman buka di browser maka tampilannya akan seperti pada gambar di bawah ini.

Cara Membuat Pop Up Dengan Jquery

Demikian artikel tentang Cara Membuat Pop Up Dengan Jquery. Semoga dapat bermanfaat dan selamat mencoba.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More