Pop Up

On Click PopUp Window open in the middle

HTML

<div id="popupLogin">
    hello <a href="#" id="popupLoginClose"> close</a>
</div>

<div><a href="#" id="Login_PopUp_Link">Login</a></div>
<div id="LoginBackgroundPopup"></div>

CSS

#LoginBackgroundPopup{  
display:none;  
position:fixed;  
_position:absolute; /* hack for internet explorer 6*/  
height:100%;  
width:100%;  
top:0;  
left:0;  
background:red;  
border:1px solid #cecece;  
z-index:1;  
} 
#popupLogin{  
display:none;  
position:fixed;  
_position:absolute; /* hack for internet explorer 6*/  
height:384px;  
width:408px; 
top:50%;
left:50%;      
background:#FFFFFF;  
border:2px solid #cecece;  
z-index:2;  
padding:12px;  
font-size:13px;  
}

JavaScript

$(document).ready(function() {

    var popupStatus = 0;


    $("#Login_PopUp_Link").click(function() {

        //Aligning our box in the middle
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var popupHeight = $("#popupLogin").height();
        var popupWidth = $("#popupLogin").width();
        //centering
        $("#popupLogin").css({
            "position": "absolute",
            "top": windowHeight / 2 - popupHeight / 2,
            "left": windowWidth / 2 - popupWidth / 2
        });

        //aligning our full bg 
        $("#LoginBackgroundPopup").css({
            "height": windowHeight
        });


        // Pop up the div and Bg
        if (popupStatus == 0) {
            $("#LoginBackgroundPopup").css({
                "opacity": "0.7"
            });
            $("#LoginBackgroundPopup").fadeIn("slow");
            $("#popupLogin").fadeIn("slow");
            popupStatus = 1;
        }


    });


    //Close Them
    $("#popupLoginClose").click(function() {
        if (popupStatus == 1) {
            $("#LoginBackgroundPopup").fadeOut("slow");
            $("#popupLogin").fadeOut("slow");
            popupStatus = 0;
        }
    });

});