Question

I’m using fancyBox (version 2) and in the fancyBox is a Contact Form. I’m adding my own “are you sure that you want to close?” box instead of a basic confirm() so if the user accidentally clicks close, the form contents won’t be lost. Here is what I’m doing:

$('.fancybox').fancybox({
openEffect: 'fade',
closeEffect: 'fade',
openSpeed: 'fast',
closeSpeed: 'fast',
beforeClose: function() { $('#confirm_contact_close').fadeIn(300); }
});

But it closes right when it shows the div. How can I cancel the closing of the fancyBox unless the “Yes” button is clicked?

HTML of the confirm div:

<div id="confirm_contact_close">
<h2 class="secondary_heading" style="font-size: 27px;">Do you really want to continue?</h1>
<p>If you continue, the entire form will be cleared.</p>
<br />
<button id="continue_contact_close">Yes</button> 
<button id="cancel_contact_close">No</button>
</div>

jQuery for buttons:

$('#confirm_contact_close').fadeIn(300);
$('#continue_contact_close').live('click', function() {
$.fancybox.close(true);
});
$('#cancel_contact_close').live('click',function() {
$('#confirm_contact_close').fadeOut(300);
});

I tried adding return false; in the beforeClose callback but that doesn’t work because when the “Yes” button is clicked it won’t close then as well.

Thanks in advance.

Answer 1

Nathan, I have looked through the Google Chrome DEV. And I found that the fancybox close button classes are: fancybox-item, and fancybox-close.

What I suggest doing is adding an ID to that close button using .attr().

Like this:

$('.fancybox-item fancybox-close').attr('id','close');

I just decided to name it close because that would be the most obvious choice for the close button 😉

Now you can just do:

$('#close').click(function(){
//Put Code
});

And Add the Code you need.

Have a great day.