CODEWITHSUNDEEP
jqueryfancybox
Nathan
Nathan

Reputation: 12000

How can I stop a fancyBox from closing?

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.

Upvotes: 3

Views: 7171

Answers (4)

bski
bski

Reputation: 41

I fixed this by unbinding all events of the close button

$(document).ready(function() {
$('.fancybox').fancybox({
autoSize : false,
scrolling : 'auto',
beforeLoad : function() {                    
    this.width = $(window).width()*0.95;  
    this.height = $(window).height()*0.95; 
},

'afterShow': function() {
    //override fancybox_close btn
    $('.fancybox-item.fancybox-close').attr('title','Sluiten');
    $('.fancybox-item.fancybox-close').unbind();
    $('.fancybox-item.fancybox-close').click(function() {
        var dirt_res = dirty_check('HOK');
        if(is_string(dirt_res)) {
            var dirt_ask = confirm(dirt_res);
                if(is_string(dirt_ask)) {
                } else { 
                    parent.location.reload(true);
                }
        } else {
            parent.location.reload(true);
        }
    });
}

});

});

Cheers!

Upvotes: 4

Mark Notton
Mark Notton

Reputation: 5066

I had a similar situation and this was my solution:

In the key/values for the fancyBox, I added modal. Modal will disable navigation and closing. After the lightbox opens fully, I tell it to call a function (enableFancyboxConfirmClose).This function adds all the necessary div's and buttons. I'm essentially adding a custom close button, which allows me to call my own function. 

$(".fancybox").fancybox({
    maxWidth    : 829,
    maxHeight   : 600,
    fitToView   : false,
    width       : '70%',
    height      : '70%',
    autoSize    : false,
    closeClick  : true,
    openEffect  : 'fade',
    closeEffect : 'fade',
    modal       : true,
    afterShow   : function() { enableFancyboxConfirmClose() }   
});

The jQuery code for the buttons

function enableFancyboxConfirmClose () {
    $(".fancybox-wrap").append('<div title="Close" class="fancybox-close fancybox-custom-close-btn"></div><div class="fancybox-confirm fancybox-opened"><span style="padding:20px;">Closing this window will clear your entire form, are you sure you want to leave?</span><button class="fancybox-custom-close-confirm">Yes</button> <button class="fancybox-custom-close-cancel">No</button></div>');

    $('.fancybox-custom-close-btn').click(function() {
        $(this).fadeOut();      
        $('.fancybox-confirm').fadeIn();
    });

    $('.fancybox-custom-close-confirm').click(function() {
        $(".fancybox-confirm").fadeOut();
        $.fancybox.close();
    });

    $('.fancybox-custom-close-cancel').click(function() {
        $(".fancybox-confirm").fadeOut();           
        $(".fancybox-close").fadeIn();  
    });
}

CSS

.fancybox-confirm {
    position: relative;
    margin-top: 10px;
    width: 100%;
    height: 18px;
    background-color: #FC0;
    font-size:14px; 
    padding: 10px 0;
    color: #444;
    text-shadow: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display:none;
}

.fancybox-custom-close-confirm, .fancybox-custom-close-cancel {
    height: 20px;
    float:right;
    font-size:13px; 
    margin-right: 10px;
    padding: 0 5px;
    cursor:pointer;
}

It's not exactly an elegant solution. But it does the job for me.

Upvotes: 1

Shawn31313
Shawn31313

Reputation: 6052

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.

Upvotes: 2

jeffknupp
jeffknupp

Reputation: 6274

Simply changing the order around should do it. Make clicking the button display the warning, then hook up the fancy box to the "Yes" button on the warning.

Upvotes: 1

Related Questions