CODEWITHSUNDEEP
javascripthtmljqueryjquery-events
Aaron Salazar
Aaron Salazar

Reputation: 4527

jQuery Close DIV By Clicking Anywhere On Page

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

Upvotes: 5

Views: 29765

Answers (5)

Mikey G
Mikey G

Reputation: 3491

$(":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.

Upvotes: 0

Karl Barker
Karl Barker

Reputation: 11341

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.

Upvotes: 1

Alexander Varwijk
Alexander Varwijk

Reputation: 2083

$(document).click (function (e) {
    if (e.target != $('#email-signup')[0]) {
        $('#email-signup').hide();
    }
});

Upvotes: 8

James Montagne
James Montagne

Reputation: 78630

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/

Upvotes: 11

Grigor
Grigor

Reputation: 4049

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

Upvotes: 0

Related Questions