Iso Web Id Tutorial Komputer
Related Articles
Ada kalanya kalian tidak puas dengan plugin – plugin dari javascript framework seperti jquery karena yang kita butuhkan hanya fungsi – fungsi sedehana seperti popup. Banyak plugin popup window yang bagus dan keren tapi tetap saja keinginan untuk membuat sendiri itu ada, berbekal iseng – iseng dimalam hari coba membuat popup window yang simple dan keren (menurut saya).
untuk lebih jelasnya kita coba membuatnya sekarang
1. Buat 1 file dengan nama index.html
<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html >
<head>
<title>jQuery Popup</title>
<link href=”./js/jpopup/jpopup.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”./js/jquery.js”></script>
<script type=”text/javascript” src=”./js/jpopup/jquery.popup.js”></script>
</head>
<body>
<a href=”#popup” name=”modal”>Klik</a> untuk menampilkan Popup
<div id=”boxes”>
<div id=”popup” class=”window”>
<a href=”#” class=”close”></a>
<h2 class=”judul”>Testing</h2>
<div class=”popup_content”>
Taruh disini htmlnya
</div>
</div>
</div>
<div id=”bg_popup”></div>
</body>
</html>
2. Kalian buat file css dengan nama jpopup.css pada folder jpopup
#bg_popup {position:absolute;left:0;top:0;
z-index:9000;background-color:#000;display:none;}
#boxes .window { position:absolute;left:0;top:0; width:440px;
height:200px;display:none;z-index:9999;padding:20px;}
#boxes #popup {position:relative;width:480px;height:320px;padding:5px;background-color:#ffffff;
-webkit-border-radius: 5px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius: 5px; /* FF1-3.6 */
border-radius: 5px;
}
.close{position:absolute;top:-25px;right:-20px;text-align: right;font-size: 10px; z-index:9999;
background:url(icon_close.png) no-repeat;width:24px;height:24px;color:#FFF;margin:10px;
}
#popup h2{position:absolute;left:0;top:-13px;background-color:#3B5998;width:98%;height:20px;line-height:20px;
padding:10px 5px 5px 5px;font:normal 12px Verdana;color:#FFF;text-transform:uppercase;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.popup_content{margin-top:35px;}
$(‘a[name=modal]’).click(function(e) { // ketika link di klike.preventDefault();//Ambil isi dari attribut href dari Tag avar id = $(this).attr(‘href’);//deklarasi variabel panjang dan lebar pada layarvar maskHeight = $(document).height();var maskWidth = $(window).width();//masukkan panjang dan lebar layar pada id mask$(‘#bg_popup’).css({‘width’:maskWidth,’height’:maskHeight});//cuma effect untuk mempermanis 🙂$(‘#bg_popup’).fadeIn(1000);$(‘#bg_popup’).fadeTo(“slow”,0.8);//untuk menampilkan besar window yang ditampilkanvar winH = $(window).height();var winW = $(window).width();//posisikan popup pada tengah layar$(id).css(‘top’, winH/2-$(id).height()/2);$(id).css(‘left’, winW/2-$(id).width()/2);//Tampilkan selama 2 detik (untuk Effect saja)$(id).fadeIn(2000);});//Ketika Tombol Close ditekan$(‘.window .close’).click(function (e) {e.preventDefault();$(‘#bg_popup’).hide();$(‘.window’).hide();});//bila pada area bg_popup diklik$(‘#bg_popup’).click(function () {$(this).hide();$(‘.window’).hide();});
