シンプルなモーダルウィンドウ

Result

jQuery

//モーダルウィンドウで表示するボックスを隠しておく
$("#fade").hide();
$(".show_hide").show();
//クリックイベントでトグル出来るようにする
$('.show_hide').click(function nos() {
    $("#fade").fadeToggle("fast");
});​

css

.wrap{margin: 25px;}

#fade {
    height:100%;
    width:100%;
    background-color: rgba(0, 0, 0, 0.7);
    padding:0;
    margin:0;
    border:0;
    position:absolute;
    overflow:hidden;
    left:0px;
    top:0px;
    display:block;
}
.cont{
    margin:10% auto 0 auto;
    width:300px;
    height:300px;
    background-color: #FFF;
    -moz-box-shadow: 0 0 100px 1px #444;
    -webkit-box-shadow: 0 0 100px 1px #444;
    font-size:20px;
}

​

html

<div class="wrap"><a href="javascript:void(0);" class="show_hide">Show/hide</a>
<p> Lorem ipsum ... </p>
<div id="fade">
    <div class="cont">
        Show Window! XD <br>
        <a href="#" class="show_hide">hide</a></div></div> </div>​