Edit in JSFiddle

<div class="backgroundWrapper"></div>
<div class="modalDialog">
    <a class="closeLink" title="close popup">X</a>
    Hello! 
</div>

<a class="openPopup" title="open popup">Open Popup</a>

function centerPopup(popupName){
    var winW = $(window).width();
    var winH = $(window).height();
    var eleW = $('.'+ popupName).width();
    var eleH = $('.'+ popupName).height();
    eleH = (winH - eleH)/2;
    eleW = (winW - eleW)/2;
    $('.'+ popupName).css('marginTop', eleH);
    $('.'+ popupName).css('marginLeft', eleW);
    $('.backgroundWrapper').fadeIn();
    $('.'+ popupName).fadeIn();
}

function closePopup(className){
    $('.backgroundWrapper').fadeOut();
    $('.'+ className).fadeOut();
}	

$('.openPopup').on('click', function(){
    centerPopup('modalDialog');
});

$('.closeLink').on('click', function(){
    closePopup('modalDialog');		
});

.backgroundWrapper{
    display:none;
    position:fixed;	
    height:100%;
    width:100%;	
    left: 0;
    top: 0;		
    background:#000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    z-index:1;
}
.modalDialog{
    display: none;
    position: fixed;
    width: 300px;
    height: 200px;
    z-index: 3;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
}
.modalDialog a{			
    float: right;	
}
a{
    cursor: pointer;
    color: blue;
}