クリックでアニメーションしながらオーバーレイを表示

Result

jQuery

//オーバーレイを表示
$("#show").click(function(){
    $("#overlay").show(500);
});
    //オーバーレイを隠す
$("#overlay").click(function(){
       $(this).hide(500);
});
    //イベントのバブリングを中止
$("#content").click(function(e){
    e.stopPropagation();
});​

css

#show{
    cursor: pointer;
    position: absolute;    
}

#overlay{
    opacity:0.7;
    background: black;
    color: white;
    height: 100%;
    position: absolute;
    width:100%;
    display:none;
}

#content{
    border: white solid 1px;
    color: white;
    left: 30%;
    position: absolute;
    top: 30%;
    width: 50%;
}​

html

<p id="show">Show Overlay</p>
<div id="overlay">
    <p id="content">クリックで消えますが、この部分はクリックできます</p>
</div>​

via

Best Way to Stop Event Propagation in Javascript