Close DIV by clicking anywhere

by Vince Aggrippino

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;
    position: fixed;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    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.show();
    });
    $container.click(function () {
        $container.hide();
    });
});