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">
.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>
Kemudian selanjutnya yaitu membuat script dari javascript agar ketika suatu button kita klik maka popup akan muncul di layar komputer, silahkan salin kode berikut.
<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>
Dan yang terakhir membuat tag div silahkan salin kode berikut
<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>
untuk kode lengkapnya seperti ini, simpan sebagai index.html
<!DOCTYPE html>
<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>
OK. selesai, selamat mencoba dan semoga bermanfaat.
nggak bisa kalau autoload ya pop up nya?
ReplyDelete