onclick, how can I hide a <div> and show the content behind it?
<p>How can I make this <code>&lt;div&gt;</code> hide itself when a click occurs outside of it? I would like to be able to hide it and then show the rest of the content of the page that is behind it. </p>

<pre><code>&lt;html&gt;
&lt;style&gt;
.overlay
{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 80;
}
.popupContent
{
    background: #fff;
    padding: 5px;
    border: 1px solid black;
    position: fixed;
    top: 100px;
    left: 400px;
    bottom: 365px;
    right: 300px;
    z-index: 81;
}​

&lt;/style&gt;

&lt;div id="initialPopup"&gt;
    &lt;div class="overlay"&gt;&lt;/div&gt;
    &lt;div class="popupContent" onclick="hideInitialPopup()"&gt;
    Good Morning, Please Upload Your File Today!
    &lt;/div&gt;

&lt;/div&gt;
 ​



&lt;script&gt;
function hideInitialPopup() {
    document.getElementById("initialPopup").style.display = "block";
    $("popupContent").mouseup(function(){
    if(! mouse_is_inside) $
}​
&lt;/script&gt;

&lt;/html&gt;
</code></pre>
