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 box itself, of course.
I have looked around on this site and there are various solutions for this problem but every one I've tried shows and then hides my div instantly. I must be doing something wrong.
This is the HTML:
<a href="#">Sign Up</a> <div> <div> <h2>E-mail Notifications</h2> <input type="text" name="description" placeholder="Enter your e-mail address" /> <a href="#">Sign Up</a> </div> </div> This is my Javascript:
$('#email-signup').click(function(){ e.stopPropagation(); }); $("#email-signup-link").click(function() { e.preventDefault(); $('#email-signup').show(); }); $(document).click(function() { $('#email-signup').hide(); }); 5 Answers
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(); }); $(document).click (function (e) { if (e.target != $('#email-signup')[0]) { $('#email-signup').hide(); } }); 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.
6
