クリックでアニメーションしながらオーバーレイを表示
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
