jQuery點擊OUT overlay

我希望當用戶點擊＃email-form div時，它會被隱藏，並且#stamp會再次顯示。我試圖用覆蓋div來做到這一點，但它不工作。jQuery點擊OUT overlay

  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>

來源

2012-04-02 MG1

下面是一個替代的想法：綁定一個事件處理程序到'document.onclick' - 然後停止傳播到＃email-form的所有點擊。 – Niko 2012-04-02 15:47:15

試試這樣說：http://jsfiddle.net/awEGq/1/

的position:fixed確保它總是充滿整個的背景，即使你有滾動條。如果您使用position:absolute，則可以滾動瀏覽疊加層。

由於display:fixed，疊加層放置在頁面的其餘部分之上。爲了防止這種情況發生，我將它放回z-index。

background-color僅供展示，以顯示疊加層的位置。您可以在實時執行中將其刪除。

來源

2012-04-02 15:55:29

由於某些原因，當我點擊疊加層來恢復圖像時，它不起作用。 – MG1 2012-04-02 20:17:08

在我的示例中呢？因爲它在這裏工作。 – 2012-04-03 05:27:15

刪除z-index使其工作.. – MG1 2012-04-03 15:43:17

正如我在評論，這裏是一個不同的方法：

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

來源

2012-04-02 15:55:19 Niko

這加載頁面顯示兩個元素，然後當我點擊#stamp它只是隱藏＃電子郵件形式。 – MG1 2012-04-02 16:10:16

這只是一個片段，您需要將其與現有代碼進行整合。 – Niko 2012-04-02 16:16:11

我意識到這一點，但似乎邏輯如果有點偏離這裏.. – MG1 2012-04-02 18:39:45

jQuery點擊OUT overlay

回答

相關問題