$("#show").click(function(){ $("#overlay").show(500); }); $("#overlay").click(function(){ $(this).hide(500); }); $("#content").click(function(e){ e.stopPropagation(); });
#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%; }
<p id="show">Show Overlay</p> <div id="overlay"> <p id="content">クリックで消えますが、この部分はクリックできます</p> </div>