I have a login box that fades in over a big image slider. I want to prevent the image slider links from being clicked when the login box is open (so they can click anywhere on it to close the login box).

Below is my code, but it does not work and clicking the slider still activates the link.

$('#my-raveis-login').click(function() {
    if ($('#login-box').is(':hidden')){
        $('#login-box').fadeIn('normal');
        $('#login-box').find('.login-toparrow').fadeIn('normal');
    }
    else{
        $('a.featured').click( function() {
            e.preventDefault();
        });
        $('#login-box').fadeOut('normal');
        $('#login-box').find('.login-toparrow').fadeOut('normal');
    }
    return false
});

Any ideas?

有帮助吗?

解决方案

Was able to answer my own question. Here is my working code.

//Login Toggle
$('#my-raveis-login').click(function() {
    if ($('#login-box').is(':hidden')){
        $('#login-box').fadeIn('normal');
        $('#login-box').find('.login-toparrow').fadeIn('normal');
    }
    else{
        $('#login-box').fadeOut('normal');
        $('#login-box').find('.login-toparrow').fadeOut('normal');
    }
    return false
});
//Prevent slider if login is open
$('#home-slider a.featured').click(function(e) {
    if ($('#login-box').is(':visible')){
        e.preventDefault();
        $('#login-box').fadeOut('normal');
        $('#login-box').find('.login-toparrow').fadeOut('normal');
    } 
});

It kind of duplicates some of the code for hiding the login, but it definitely works. Feel free to post if you have a cleaner way of doing this.

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top