A bit late but this is a solution that worked for me. Perfect if your modal is inside the overlay tag. So, the modal will close when you click anywhere outside the modal content.
HTML
<div class="modal">
<div class="overlay">
<div class="modal-content">
<p>HELLO WORLD!</p>
</div>
</div>
</div>
JS
$(document).on("click", function(event) {
if ($(event.target).has(".modal-content").length) {
$(".modal").hide();
}
});
Here is a working example