Close DIV by clicking anywhere
HTML
<button>Click me to show the DIV</button>
<div class="container">
<div class="thediv">
<p>I'm the DIV</p>
</div>
</div>
CSS
div.container {
display: none;
background-color: rgba(0, 255, 0, 0.5);
}
div.thediv {
position: absolute;
top: 30%;
left: 10%;
background-color: gray;
color: white;
padding-top: 1em;
border-radius: 5px;
width: 50%;
}
p {
background-color: black;
text-align: center;
padding: 2em;
}
JavaScript
$(document).ready(function () {
var $button = $("button");
var $container = $("div.container");
$button.click(function () {
$container.toggle();
});
html.click(function () {
$container.hide();
});
});