jQueryオーバーレイでOUTをクリック

Question

ユーザーが＃電子メールフォームのdivをクリックすると、非表示になり、#stampが再び表示されます。 --------------------------

  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(); 
     }); 

..私は、オーバーレイdiv要素でこれを行うにしようとしていますが、それは働いていません-------- 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

このようにそれを試してみてください。http://jsfiddle.net/awEGq/1/

position:fixedあなたはスクロールバーを持っている場合でも、それは常に背景全体をいっぱいにすることを確認します。 position:absoluteを使用すると、オーバーレイをスクロールすることができます。

display:fixedのため、オーバーレイは残りのページの上に配置されます。これを防ぐため、私はそれをさらにz-indexで置きました。

background-colorは、オーバーレイがどこにあるかを示すためのものです。あなたは実際の実装でそれを削除することができます。

Answer 2

概要コメントは、ここでは異なるアプローチです：

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(); 
}); 

はあなたが＃のメールフォームを非表示にしている時はいつでもdocument.onclickから「hideEmailForm」をアンバインドすることを忘れないでください！

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