jQueryどこでもクリックしてDIVを閉じるページ

Question

email-signup-linkをクリックするとemail-signupを開きます。それからボックス自体を除いて、ページ上のどこかをクリックして閉じることができます。

私はこのサイトを見回しましたが、この問題の解決策はたくさんありますが、私が試したすべてのものを表示してからすぐに私のdivを隠します。私は間違ったことをする必要があります。私のJavascriptの

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

これは、次のとおりです：

この

はHTMLです

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

Answer 1

2つのこと。実際には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(); 
}); 

あなたはポップアップ背後のオーバーレイのいくつかの種類を持つと結合したほうが良いと思いますが、上記のイベントをクリックするだけです。

別のstackoverflowの記事で参照されるように

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

...

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

...または何かsimliar。