I would like to open email-signup
when I click on email-signup-link
. Then I would like to close it by clicking anywhere on the page except for the
The way I've often seen this done is by overlaying the page behind the form with a div (greyed out usually). With that, you could use:
$("#greydiv")..click(function() {
$("#email-signup").hide();
$("#greydiv").hide();
});
...or something simliar.
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();
});
});
as referenced in another stackoverflow post...
$(":not(#email-signup)").click(function() {
$("#email-signup").hide();
});
Although you'd be better off having some kind of an overlay behind the popup and binding the above click event to that only.
$(document).click (function (e) {
if (e.target != $('#email-signup')[0]) {
$('#email-signup').hide();
}
});
Two things. You don't actually have e
defined, so you can't use it. And you need stopPropagation
in your other click handler as well:
$('#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/