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.
