Creating a Simple jQuery Popup

Creating a Simple jQuery Popup

  2:30 PM    johar

---

Source jQuery

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(a[name=popup]).click(function(e) {
        e.preventDefault();
        var id = $(this).attr(href);
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $(#masking).css({width:maskWidth,height:maskHeight});
        $(#masking).fadeIn(1000);  
        $(#masking).fadeTo("slow",0.8);
        var winH = $(window).height();
        var winW = $(window).width();
        $(id).css(top,  winH/2-$(id).height()/2);
        $(id).css(left, winW/2-$(id).width()/2);
        $(id).fadeIn(2000);
    });
   
    $(.window .close).click(function (e) {
        e.preventDefault();
        $(#masking, .window).hide();
    });   
   
    $(#masking).click(function () {
        $(this).hide();
        $(.window).hide();
    });   

 $(window).resize(function () {
   var box = $(#kotak .window);
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $(#maskinging).css({width:maskWidth,height:maskHeight});
        var winH = $(window).height();
        var winW = $(window).width();
        box.css(top,  winH/2 - box.height()/2);
        box.css(left, winW/2 - box.width()/2);
 
 });
});
</script>

Source CSS

<style>
body { margin:0; }
#masking { position:absolute;  z-index:9000;  background-color:#000;  display:none;  margin:0; top:0; }
#kotak .window { position:fixed;  width:440px;  height:200px;  display:none;  z-index:9999;  padding:20px; background-color:#FFF; }
/* Popup style */
#kotak #jendela { width:375px; height:203px; background-color:#FFF; }
.link { display:block; margin:30px 0 0; }
</style>