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="#" 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>
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();
});
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/
$(document).click (function (e) {
if (e.target != $('#email-signup')[0]) {
$('#email-signup').hide();
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With