Edit in JSFiddle

$("#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>