Result

jQuery

//クリックイベント
$("#showoverlay").click(function() {
    //オーバーレイ用のボックスを作成
    $("body").append("<div id='overlay'></div>");
    //フェードエフェクト
    $("#overlay").fadeTo(500, 0.7);
    $("#modalbox").fadeIn(500);
});
//閉じる際のクリックイベント
$("#close").click(function() {
    $("#modalbox, #overlay").fadeOut(500, function() {
        $("#overlay").remove();
    });

});
$(window).resize(function() {
    //ボックスサイズ
    $("#modalbox").css({
        top: ($(window).height() - $("#modalbox").outerHeight()) / 2,
        left: ($(window).width() - $("#modalbox").outerWidth()) / 2
    });
});
$(window).resize();​

css

#showoverlay{margin:25px;}
#modalbox {
    display:none;
    position:absolute;
    z-index:1000;
    width:400px;
    padding:20px;
    background:#fff;
    border:5px solid #eee;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}

#overlay {
    opacity:0;
    filter: alpha(opacity=0);
    position:absolute;
    top:0;
    left:0;
    z-index:900;
    width:100%;
    height:100%;
    background:#000;
}

#close {
    line-height:1;
    font-size:14px;
    position: absolute;
    top:10px;
    right:10px;
    color:red;
    text-decoration:none;
}​

html

<div id="modalbox">  
    <a href="#" id="close">x</a>
    <p> text </p>
</div>
<a href="#" id="showoverlay">Show</a>​

via

jQuery_modal_overlay