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

});