jQuery klicken Sie auf OUT mit Overlay

Question

Ich möchte, dass, wenn der Benutzer aus dem # E-Mail-Formular div klickt, es ausgeblendet wird und #stamp wieder angezeigt wird. Ich versuche, dies mit einem Overlay Div zu tun, aber es funktioniert nicht ..

  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

es so versuchen: http://jsfiddle.net/awEGq/1/

Die position:fixed stellt sicher, dass es immer den gesamten Hintergrund ausfüllt, auch wenn Sie Rollbalken haben. Wenn Sie position:absolute verwenden, können Sie an der Überlagerung vorbei blättern.

Wegen der display:fixed wird das Overlay über den Rest der Seite gelegt. Um das zu verhindern, habe ich es mit der z-index weiter hinten platziert.

Die background-color ist nur für die Show, um anzuzeigen, wo das Overlay ist. Sie können es in Ihrer Live-Implementierung entfernen.

Answer 2

Wie in meinem Kommentar, hier ist ein anderer Ansatz:

var hideEmailForm = function() { 
    jQuery('#email-form').hide(); 
    jQuery('#stamp').show(); 
}; 

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

    event.stopPropagation(); // <-- NEW! 
    jQuery(document).one('click', hideEmailForm); 
}); 

jQuery('#email-form').click(function(event) { 
    event.stopPropagation(); 
}); 

Remember „hideEmailForm“ von document.onclick zu entbinden, wenn Sie # E-Mail-Formular versteckt sind!

jQuery('#email-form').unbind('click', hideEmailForm);