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

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

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

Answer 3

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 4

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

Answer 5

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

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

... или что-то другое.