Assalamualaikum wr.wb.
bertemu lagi dengan saya, kali ini saya akan menulis tutorial tentang pop-up, apa itu pop-up? Kalo menurut wikipedia pop-up ini adalah iklan yang melayang tiba-tiba, kalau dalam boostrap itu namanya “modal”, dan kalo menurut saya sediri pop-up itu div melayang. Hehe. Terserah apapun pengertiannya saya yakin pambaca sudah paham apa sebenarnya pop-up, dan saya yakin anda sudah pernah melihatnya.
ok langsung ke tutorial.
Buat HTML dulu.
<!doctype html> <html> <meta charset='utf-8'> <head> <title> Pop-Up </title> <script src='jquery-1.8.2.min.js'></script> </head> <body> //div overlay adalah div warna hitam transparan untuk menutupi content //saat pop-up muncul <div class='overlay'> </div> //nah ini dia pop-upnya <div class='pop-up'> <h2> Pop-Up Jquery CSS3 jagocoding </h2> <input type='button' value='Tutup' class='tutup'> </div> <input type='button' value='Keluar Pop-Up' class='bangkit'> </body> </html>
Kemudian tambahkan css.
<style> * { margin:0; padding:0; } .overlay { height:100%; width:100%; background-color:#000; opacity:0.8; z-index:101; position:fixed; display:none; } .bangkit{ margin-left:10px; margin-top:10px; border:1px solid #000; cursor:pointer; height:30px; border-radius:5px; background-color:#000; width:100px; font-size:15px; color:white; font-family:times new roman; } .tutup { float:right; border:1px solid #000; cursor:pointer; height:30px; border-radius:5px; background-color:#000; width:100px; position:absolute; bottom:2px; right:2px; font-family:times new roman; font-size:15px; color:white; } .bangkit:hover,.tutup:hover{ box-shadow:0px 0px 10px #000; background-color:white; color:#000; } .pop-up { height:200px; width:400px; border:4px solid #aaf200;; z-index:999; position:fixed; margin-right:auto; margin-left:auto; display:none; top:100px; left:0; right:0; box-shadow:0 0 15px #000; border-radius:10px; background-color:#fffff0; text-align:center; } </style>
Berikut penampakannya.
tombol diatas belum berfungsi karna kita belum menambahkan code jquerynya.
berikut jquerynya
<script> //apabila halaman sudah diload secara keseluruhan $(document).ready(function(){ //apabila tombol ber class=”bangkit” diklik (dalam hal ini tombol “Keluar Pop-Up”) $('.bangkit').click(function(){ //maka div ber class=”overlay” yang tadinya hiden, akan tampil $('.overlay').fadeIn('slow'); //nah ini baru class=”pop-up”nya tampil. $('.pop-up').fadeIn('slow'); }); }); </script>
kita coba jalankan. dan berikut hasilnya.
selanjutnya code untuk tombol "Tutup".
//apabila tombol ber class=”tutup” diklik $('.tutup').click(function(){ //sembunyikan lagi pop-upnya $('.pop-up').fadeOut(2000); //sembunyikan lagi div overlaynya $('.overlay').fadeOut(2000); });
Kemudian coba, dan klik tombol "Tutup" maka pop-up akan hilang seperti sedia kala.
Ok sekian tutorial singkat dari saya.
FULL CODE
<!doctype html> <html> <meta charset='utf-8'> <head> <title> Pop-Up </title> <script src='jquery-1.8.2.min.js'></script> <style> * { margin:0; padding:0; } .overlay { height:100%; width:100%; background-color:#000; opacity:0.8; z-index:101; position:fixed; display:none; } .bangkit{ margin-left:10px; margin-top:10px; border:1px solid #000; cursor:pointer; height:30px; border-radius:5px; background-color:#000; width:100px; font-size:15px; color:white; font-family:times new roman; } .tutup { float:right; border:1px solid #000; cursor:pointer; height:30px; border-radius:5px; background-color:#000; width:100px; position:absolute; bottom:2px; right:2px; font-family:times new roman; font-size:15px; color:white; } .bangkit:hover,.tutup:hover{ box-shadow:0px 0px 10px #000; background-color:white; color:#000; } .pop-up { height:200px; width:400px; border:4px solid #aaf200;; z-index:999; position:fixed; margin-right:auto; margin-left:auto; display:none; top:100px; left:0; right:0; box-shadow:0 0 15px #000; border-radius:10px; background-color:#fffff0; text-align:center; } </style> </head> <body> //div overlay adalah div warna hitam transparan untuk menutupi content //saat pop-up muncul <div class='overlay'> </div> //nah ini dia pop-upnya <div class='pop-up'> <h2> Pop-Up Jquery CSS3 jagocoding </h2> <input type='button' value='Tutup' class='tutup'> </div> <script> $(document).ready(function(){ $('.bangkit').click(function(){ $('.overlay').fadeIn('slow'); $('.pop-up').fadeIn('slow'); }); $('.tutup').click(function(){ $('.pop-up').fadeOut(2000); $('.overlay').fadeOut(2000); }); }); </script> <input type='button' value='Keluar Pop-Up' class='bangkit'> </body> </html>
semoga bermanfaat.
Trima kasih.
Wassalamualaikum wr.wb.