Question

I would like it that when the user clicks out of the #email-form div, it is hidden and #stamp is displayed again. I am trying to do this with an overlay div, but it’s not working..

            jQuery('#email-form').hide();

        jQuery('#stamp').click(function()  {
            jQuery(this).hide();    
            jQuery('#email-form').show();
            jQuery(

        });

        jQuery('.overlay').click(function() {
                jQuery('#email-form').hide();
                jQuery('#stamp').show();
        });

———————————- HTML ——————————

 <div class="overlay" style="width:100%; height:100%;"></div>
 <div id="stamp"><img src="email_postmark.png"/></div>
 <div id="email-form">
    <form id="signup" action="<?=$_SERVER['PHP_SELF']; ?>" method="get">
         <span id="response">
     <?php require ('store-address.php'); if($_GET['submit']){ echo storeAddress(); } ?>
     </span>
    <input type="text" name="email" id="email" placeholder="TYPE EMAIL & PRESS ENTER"/>
    </form>
    </div>

Answer 1

Try it like this: http://jsfiddle.net/awEGq/1/

The position:fixed makes sure that it always fills up the entire background, even if you have scrollbars. If you use position:absolute, you can scroll past the overlay.

Because of the display:fixed, the overlay is placed on top of the rest of the page. To prevent this, I placed it further back with the z-index.

The background-color is just for show, to show where the overlay is. You can remove it in your live implementation.