Belajar jQuery kali ini akan membahas tentang cara membuat popup dengan jquery. sering kita jumpai sebuah kotak yang muncul saat membuat suatu halaman website atau saat menekan tombol tertentu itulah popup, agar lebih jelas apasih sebenarnya popup atau kotak yang muncul di website. silahakan lihat contoh-contoh popup yang sering kita jumpai di bawah ini
.
.
 |
| contoh popup like fanpage dari facebook |
 |
| contoh popup form login |
 |
| contoh popup subscribe |
Itulah contoh-contoh popup. mungkin dari kalian ada yang bingung tentang bagaimana membuat popup tersebut, memang banyak plugin-plugin yang menyediakan fitur popup untuk ditanamkan pada website namun perlu kalian ketahui script popup ini tidaklah susah seperti apa yang kita bayangkan bahkan scriptnya cukup pendek dengan pengetahuan HTML, CSS dan jQuery tentunya kita sudah bisa membuatnya. baiklah kalian bisa mengikuti step by step atau langkah-langkah berikut :
Step by step-nya:
KODE HTML :<!DOCTYPE html>
<html>
<head>
<title>POP UP</title>
<style>
/* Letakkan Kode CSS di sini */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
// letakkan kode jQuery Di sini
</script>
</head>
<body>
<a href="#" class="popup-show">popup show</a>
<div class="popup">
<div class="bg"></div>
<div class="content">
<div class="content-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, eveniet omnis perferendis assumenda, adipisci eum esse repellat voluptatibus velit, minus sunt odio accusantium natus consequuntur deleniti voluptatum! Magnam, dicta, officiis!</p>
</div>
<div class="close">Close</div>
</div>
</div>
</body>
</html>
Setelah kode HTML di tuliskan atau di copy kedalam lembar kerja kalian berikutnya kode CSS-nyaKODE CSS :
.popup{
display: none;
}
.bg{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ddd;
}
.content{
position: relative;
top:50px;
width: 300px;
margin: 0 auto;
background: #fff;
padding: 10px 20px;
}
.content-text{
}
.close{
display: inline-block;
padding: 7px 15px;
cursor: pointer;
background: #E74C3C;
color: #fff;
}
.close:hover,.close:visited{
background: #C0392B;
}
Lalu yang terakhir adalah kode dari jQuery
KODE JQUERY
$(function(){
// show popup
$('.popup-show').click(function(e) {
e.preventDefault();
$('.popup').fadeIn();
});
// close
$('.bg,.close').click(function(e){
e.preventDefault();
$('.popup').fadeOut('slow');
});
});
Baiklah itu kode yang kita butuhkan, ingat jangan lupa untuk "save" pekerjaan kalian agar scriptnya bekerja.PENJELASAN
Pada tutorial membuat popup dengan jquery kali ini kita menggunakan fadeIn() dan fadeOut(), dimana kedua fungsi ini merupakan fungsi yang memberikan efek "muncul" dan "sembunyi" dengan lembut sehingga tidak membuat kalian terkejut ketika popup ini muncul.
fadeIn() dan fadeOut() memiliki nilai default sekitar 400 ms (milisecond) namun dalam tutorial ini nilai kita set "slow" sehingga akan sangat lambat saat muncul maupun saat menghilang.
Sekian Tutorial membuat popup dari Belajar Jquery untuk pemula. kalian bisa menambahkan hal-hal lain agar lebih menarik. terima kasih
HASIL
See the Pen MYNExv by wichaksono (@wichaksono) on CodePen.
Ingin beruntung seperti temen-temen kamu?
BalasHapusLangsung saja kamu mendaftar di AsliBandar dan rasakan permainan yang akan membuat hidupmu berwarna.
Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.
Ingin beruntung seperti temen-temen kamu?
Langsung saja kamu mendaftar di www.AsliBandar.net dan rasakan permainan yang akan membuat hidupmu berwarna.
Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.
Untuk Info lebih lanjut silahkan menghubungi kami melalui :
Pin BB : 2B3C34F4
YM : Aslibandar_CS
Skype : AsliBandar
Telp : +855882388666
FB : AsliBandar
Komentar ini telah dihapus oleh pengarang.
BalasHapuskalau mau masukin kode htmlnya kedalam postingan gimana
BalasHapusHalo Bossku ^^
BalasHapusSegera Daftarkan ID di skb288,com
Menyediakan 7 Permain Hanya Dengan 1 ID
Serta Tersedia Promo Menarik
Bonus Turn Over Terbesar
Bonus Refferal Seumur Hidup
Minimal Deposit Hanya 20Rb
BBM : D8E87241
WA : +62 878 8707 6927
Di Tunggu Kehadirannya Bossku ^^
Casino Slots | Jtm Hub
BalasHapusPlay more than 1,000 free 논산 출장안마 casino slots for fun 구미 출장샵 or for real prizes, no 구미 출장샵 downloads needed and no registration required. 인천광역 출장안마 Find out how you can 여수 출장샵 play free casino slots