Web Development » Custom FancyBox close button or link

Custom FancyBox close button or link

Creating a custom close button for your FancyBox is really pretty simple. Sometimes we use the FancyBox and just need to style it differently,  or to not display the default close button and add our own – or we just want to use it for notifications/alerts and provide a “Close” button of our own after our message. You can accomplish all of the above with the fallowing little bit of javascript.

$('.Custom_FancyBox_Close').live('click',function(){
    $.fancybox.close();
    return false;
});

Now you can add all of the pretty little close buttons inside your FancyBox – but just remember if you’re loading in iframes you may have to include this javascript within the loaded content, but utilizing the ‘live’ method should take care of content loaded via ajax or just hidden divs. Hope you enjoy, and happy coding!

Comments