Membuat Popup Dengan Jquery
Kali ini saya akan share cara membuat popup sederhana dengan plugin dari jQuery bagi yang belum tahu apa itu popup saya akan jelaskan sedikit pengertian apa itu popup menurut saya sendiri
Popup adalah jendela yang muncul secara otomatis atau tiba tiba di dapan layar aplikasi kita atau saat kita membuat sebuah website atau blogger dari seseorang, fungsi dari jendela popup sendiri adalah untuk menyampaikan pesan yang berada di website kita atau seseorang sebelum kita membuka halaman halaman lain yang ada di website tersebut, atau bisa juga sebagai alternatif ketika anda membuat aplikasi yang di dalam aplikasi tersebut terdapat crud agar proses crud tidak terlempar ke page lain, melainkan tetap dalam satu page, ok dari pada bertele tele hehe langsung saja ke pembahasan pertama kita membutuhkan plugin dari jQuery itu sendiri, anda bisa mendownloadnya disini atau bisa juga menyalin kode berikut.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>Langkah selanjutnya yaitu membuat css yang mengatur tampilan popup silahkan salin kode berikut.
<style type="text/css">Kemudian selanjutnya yaitu membuat script dari javascript agar ketika suatu button kita klik maka popup akan muncul di layar komputer, silahkan salin kode berikut.
.background-popup { display: none; background-color: #000000; opacity: 0.7; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 99; }
.content-popup { font-family: Verdana; display: none; background-color: #FFFFFF; position: absolute; top: 10%; right: 15%; bottom: 10%; left: 15%; z-index: 999; border: 7px solid #BBBBBB; }
.content-popup .popup-heading { background-color: #BBBBBB; padding: 7px 0; }
.content-popup .popup-heading h4 { margin: 7px 5px; }
.content-popup .popup-heading h4 span { position: absolute; right: 7px; cursor: pointer; }
.content-popup .popup-heading h4 span:hover { color: #FFFFFF; }
.content-popup .popup-body { padding: 5px; }
.popup-loading { display: none; font-family: Verdana; max-width: 150px; position: absolute; top: 45%; left: 45%; background-color: #000000; color: #FFFFFF; padding: 10px; z-index: 998; }
</style>
<script type="text/javascript">Dan yang terakhir membuat tag div silahkan salin kode berikut
$(function(){
$background_element = $('.background-popup');
$content_element = $('.content-popup');
$loading = $('.popup-loading');
$('.btn-popup').on('click', function(){
$background_element.fadeIn('fast');
$loading.fadeIn('fast');
setTimeout(function(){ $content_element.fadeIn('fast'); $loading.fadeOut('fast'); }, 1000);
});
$('.close-popup').on('click', function(){
$background_element.fadeOut('fast');
$content_element.fadeOut('fast');
});
$(this).on('keyup', function(e){
if(e.which == 27){
$background_element.fadeOut('fast');
$content_element.fadeOut('fast');
}
});
});
</script>
<div class="background-popup"></div>untuk kode lengkapnya seperti ini, simpan sebagai index.html
<div class="content-popup">
<div class="popup-heading">
<h4>Disini untuk judul popup <span class="close-popup">X</span></h4>
</div>
<div class="popup-body">
Disini untuk konten popup
</div>
</div>
<div class="popup-loading">loading. . .</div>
<button class="btn-popup">POPUP</button>
<!DOCTYPE html>OK. selesai, selamat mencoba dan semoga bermanfaat.
<html>
<head>
<title>EXAMPLE POPUP</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
.background-popup { display: none; background-color: #000000; opacity: 0.7; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 99; }
.content-popup { font-family: Verdana; display: none; background-color: #FFFFFF; position: absolute; top: 10%; right: 15%; bottom: 10%; left: 15%; z-index: 999; border: 7px solid #BBBBBB; }
.content-popup .popup-heading { background-color: #BBBBBB; padding: 7px 0; }
.content-popup .popup-heading h4 { margin: 7px 5px; }
.content-popup .popup-heading h4 span { position: absolute; right: 7px; cursor: pointer; }
.content-popup .popup-heading h4 span:hover { color: #FFFFFF; }
.content-popup .popup-body { padding: 5px; }
.popup-loading { display: none; font-family: Verdana; max-width: 150px; position: absolute; top: 45%; left: 45%; background-color: #000000; color: #FFFFFF; padding: 10px; z-index: 998; }
</style>
</head>
<body>
<div class="background-popup"></div>
<div class="content-popup">
<div class="popup-heading">
<h4>Disini untuk judul popup <span class="close-popup">X</span></h4>
</div>
<div class="popup-body">
Disini untuk konten popup
</div>
</div>
<div class="popup-loading">loading. . .</div>
<button class="btn-popup">POPUP</button>
<script type="text/javascript">
$(function(){
$background_element = $('.background-popup');
$content_element = $('.content-popup');
$loading = $('.popup-loading');
$('.btn-popup').on('click', function(){
$background_element.fadeIn('fast');
$loading.fadeIn('fast');
setTimeout(function(){ $content_element.fadeIn('fast'); $loading.fadeOut('fast'); }, 1000);
});
$('.close-popup').on('click', function(){
$background_element.fadeOut('fast');
$content_element.fadeOut('fast');
});
$(this).on('keyup', function(e){
if(e.which == 27){
$background_element.fadeOut('fast');
$content_element.fadeOut('fast');
}
});
});
</script>
</body>
</html>
DONASI VIA PAYPAL
Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://apaitu10.blogspot.com/. Terima kasih.
Postingan Lebih Baru
Postingan Lebih Baru
Postingan Lama
Postingan Lama
Komentar