jQuery Schließen DIV durch Anklicken irgendwo auf der Seite

Question

Ich möchte öffnen email-signup wenn ich anklicke email-signup-link . Dann möchte ich es schließen, indem ich auf eine beliebige Stelle auf der Seite klicke, außer natürlich auf das Feld selbst.

Ich habe mich auf dieser Website umgesehen und es gibt verschiedene Lösungen für dieses Problem, aber jede, die ich ausprobiert habe, zeigt mein Div an und blendet es dann sofort wieder aus. Ich muss etwas falsch machen.

Dies ist der HTML-Code:

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

Dies ist mein 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

Zwei Dinge. Sie haben eigentlich keine e definiert, so dass Sie es nicht verwenden können. Und Sie brauchen stopPropagation auch in Ihrem anderen Click-Handler:

$('#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

Die Art und Weise, wie ich dies oft gesehen habe, ist die Überlagerung der Seite hinter dem Formular mit einem Div (normalerweise ausgegraut). Damit könnten Sie verwenden:

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

...oder etwas Ähnliches.

Answer 4

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

Obwohl Sie besser eine Art von Overlay hinter dem Popup und Bindung der oben genannten Klick-Ereignis zu, dass nur sein.

Answer 5

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

wie in einem anderen Stackoverflow-Beitrag erwähnt...