Question

点击email-signup时，我想打开email-signup-link。然后我想通过点击页面上的任何地方来关闭它，当然除了盒子本身。

我在这个网站上四处看看，这个问题有各种各样的解决方案，但我尝试过的每一个都会显示，然后立即隐藏我的div。我一定是做错了。

这是HTML：

<a href="#" id="email-signup-link">Sign Up</a>
<div id="email-signup">
    <div id="inner">
        <h2>E-mail Notifications</h2>
        <input class="" type="text" name="description" placeholder="Enter your e-mail address" id="description" />
        <a href="#">Sign Up</a>
    </div>
</div>

这是我的Javascript：

$('#email-signup').click(function(){
    e.stopPropagation();
});
$("#email-signup-link").click(function() {
    e.preventDefault();
    $('#email-signup').show();
});
$(document).click(function() {
    $('#email-signup').hide();
});

Answer 1

两件事。您实际上没有定义e，因此您无法使用它。而且您的其他点击处理程序中也需要stopPropagation：

$('#email-signup').click(function(e){
    e.stopPropagation();
});
$("#email-signup-link").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('#email-signup').show();
});
$(document).click(function() {
    $('#email-signup').hide();
});

http://jsfiddle.net/Nczpb/

Answer 2

$(document).click (function (e) {
    if (e.target != $('#email-signup')[0]) {
        $('#email-signup').hide();
    }
});

Answer 3

$(":not(#email-signup)").click(function() {
     $("#email-signup").hide();
});

虽然你最好在弹出窗口后面加一些覆盖，然后将上面的点击事件绑定到那个。

Answer 4

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.form_wrapper').hide();
    });
});

在另一个stackoverflow帖子中引用...

Answer 5

我经常看到这样做的方法是将表格后面的页面覆盖为div（通常是灰色的）。有了它，你可以使用：

$("#greydiv")..click(function() {
    $("#email-signup").hide();
    $("#greydiv").hide();
});

......或类似的东西。

jQuery通过单击页面上的任意位置关闭DIV

5 个答案: