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 xmlns="http://www.w3.org/1999/xhtml">

    <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;}

3. Buat 1 file javascript dengan nama jquery.popup.js
$('a[name=modal]').click(function(e) { // ketika link di klik
e.preventDefault();
//Ambil isi dari attribut href dari Tag a
var id = $(this).attr('href');
//deklarasi variabel panjang dan lebar pada layar
var 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 ditampilkan
var 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();
});

 

DEMODOWNLOAD