jQuery Закрыть DIV, нажав в любом месте на странице

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

Я часто видел, как это делается, наложив страницу за формой на div (обычно серым цветом). С этим вы можете использовать:

$("#greydiv")..click(function() {
    $("#email-signup").hide();
    $("#greydiv").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

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

Хотя было бы лучше иметь какое-то наложение за всплывающим окном и привязывать вышеупомянутое событие клика только к этому.