http://jsfiddle.net/deamondz/FE7SK/
HTML
<div class="back"></div>
<div class="popup_window">
<div class="ppw_cls"></div>
<!--<div class="ppw_cls right"></div>-->
<div class="ppw_wrap">lorem ipsum dolor sit amet</div>
</div>
<p><a href="#" class="op">open</a></p>
<p><a href="#" class="op oright">open with right close key</a></p>
CSS
.popup_window{
position:fixed;
display:none;
background:rgba(0,0,0,0.75);
padding:6px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
z-index:99;
}
.ppw_wrap{
background:#f8f8f8;
position:relative;
padding:10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.ppw_cls{
background:url(http://img217.imageshack.us/img217/1462/ppwclose.png) center no-repeat;
cursor:pointer;
display:block;
position:absolute;
top:-10px;left:-10px;
width:30px;
height:29px;
z-index:999;
}
.ppw_cls.right{left:auto;right:-10px;}
.back{
background:rgba(0,0,0,0.75);
position:absolute;
top:0px;left:0px;
display:block;
}
JS
var $ppw = $('.popup_window');
$('.ppw_cls,.back').bind('click', function() {
$('.back').fadeOut(300);
$ppw.fadeOut(300);
});
function popup() {
var ppww = $ppw.width(),
ppwh = $ppw.height();
var mww = $(window).width(),
mwh = $(window).height();
var ppwl = mww / 2 - ppww / 2,
ppwt = mwh / 2 - ppwh / 2;
$ppw.css({
left: ppwl,
top: ppwt
});
$('.back').css({
width: mww,
height: mwh
}).fadeIn(300);
$ppw.fadeIn(300);
}
$('.op').bind('click', function() {
popup();
$('.ppw_cls').removeClass('right');
return false;
});
$('.oright').bind('click',function(){$('.ppw_cls').addClass('right')})