JQuery clicks outside of itself to close a simple instance of the pop up layer

The main function is to click the display, and then by clicking anywhere on the page can turn off the display effect, mainly $(document).click

During the development process, there are often some pop-up layers, which will be automatically closed when you click on other places on the page. The following is the implementation code:

HTML code:

<div class="down">click</div>
<div class="con hide">show-area</div>

The CSS code:
. Hide {display: none; }

JS code

$(document).ready(function(){
$("div.down").click(function(e){
e.stopPropagation();
$("div.con").removeClass("hide");
});
$(document).click(function(){
if(!$("div.con").hasClass("hide")){
$("div.con").addClass("hide");
}
});
});

OK, oneself local test next, CSS style oneself modify!