Question

我希望当用户点击＃email-form div时，它会被隐藏，并且会再次显示#stamp。我试图用叠加div做这个，但是它不起作用..

            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

如我的评论中所述，这是一种不同的方法：

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

每当你隐藏＃email-form时，请记得从document.onclick取消绑定“hideEmailForm”！

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

Answer 2

尝试这样：http://jsfiddle.net/awEGq/1/

即使您有滚动条，position:fixed也会确保它始终填满整个背景。如果您使用position:absolute，则可以滚动显示叠加层。

由于display:fixed，叠加层位于页面其余部分的顶部。为了防止这种情况发生，我将z-index放回去了。

background-color仅用于显示，以显示叠加层的位置。您可以在实时实施中删除它。

jQuery点击OUT覆盖

2 个答案: