Question

I am loading a registration form from another page. The load works great. I want to next when someone clicks close to move the box up and fade out the fog. However I cant seem to get it to work even the return false which should stop it from going to /# does not work. Any ideas?

Jquery

    $('.signUpLink').click(function(data) {

        var url = $(this).attr('href');

        $( '#wrap' ).append(
            $( '<section>' ).load( url , function () {
                $('.fog').fadeIn('10000');
                $('.signUpBox').animate({top: '200px'}, 400);
                })
        );

        data.preventDefault();

    });

    $('.signUpBoxClose').click(function() {
        $('.fog').fadeOut('10000');
        $('.signUpBox').animate({top: '-200px'}, 400);
        return false;       
    });

HTML

<div class="signUpBox">
    <form action="http://localhost:8888/splooth/index.php/register" method="post" accept-charset="utf-8">
        <input type="text" name="username" value="" placeholder="Username"  />
        <input type="text" name="Email" value="" placeholder="Email Address"  />
        <input type="password" name="username" value="" placeholder="Password"  />
        <input type="submit" name="submit" value="Login"  />
    </form>
    <a class="signUpBoxClose" href="#">Close</a>

</div>
<div class="fog"></div>

CSS

.signUpBox {
    position: absolute;
    top: -1000px;
    left:50%;
    margin-left:-480px;
    width: 960px;
    border: 2px solid black;
    z-index: 25;
}

.signUpBoxClose {
    position: absolute;
    top: 0;
    right: 0;
}

.fog {
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.25);
    z-index: 24;
    display: none;
    top: 0;
    left: 0;
}

Answer 1

You are probably loading the close button dynamically, right? The .click() event isn’t attached to it, as it loads after the DOM does.

You need to use this:

$('body').on('click', '.signUpBoxClose', function() {
    $('.fog').fadeOut(10000);
    $('.signUpBox').animate({top: 200}, 400);
    return false;       
});

Or for older jQuery versions:

$('.signUpBoxClose').live(function() {
    $('.fog').fadeOut(10000);
    $('.signUpBox').animate({top: -200}, 400);
    return false;       
});