I have a Fancybox with two buttons in it: Merge and Cancel. Cancel closes the fancybox and Merge posts a form and wait for the page to reload. It takes a couple of seconds for the page to reload so after the user has pressed Merge I disable the Cancel button and I would like to set the option modal to true but I can't seem to find a way to set an option on a already opened fancybox. Does anyone have any suggestion on how to do this?

Playground: /

I have a Fancybox with two buttons in it: Merge and Cancel. Cancel closes the fancybox and Merge posts a form and wait for the page to reload. It takes a couple of seconds for the page to reload so after the user has pressed Merge I disable the Cancel button and I would like to set the option modal to true but I can't seem to find a way to set an option on a already opened fancybox. Does anyone have any suggestion on how to do this?

Playground: http://jsfiddle/vCtVq/

• javascript
• jquery
• fancybox

2 Answers 2

There is no simple option to toggle "modal" state, fancyBox is either modal or not. But I can think of two solutions.

1) Hide close button and unbind click event on the overlay -

$('#merge').click(function() {
    $('#cancel').attr("disabled", "disabled");

    $('.fancybox-item').hide();
    $('.fancybox-overlay').unbind();

    console.log('submit');
});

Demo - http://jsfiddle/am8d3/

2) Create a global variable, and check it using "beforeClose" callback. You can cancel closing by returning "false" -

var busy = false;

$(".o").fancybox({
    //modal: true
    beforeClose: function() {
        if (busy) {
            return false;
        }
    }
});

Demo - http://jsfiddle/MLjAT/

Fancybox is initilized once when the function is ran and cannot be reinitilized with different options I'm pretty sure. What you can do is create a flag and use some more traditional javascript to control the closing behavior. Set modal to true from the get go, and instead handle the close with a body click event. Then, have a true/false flag set determining if merge was clicked that does or doesn't allow the window to close on a body click. Something like this:

$('body').click(function(e) {    
    if (allowClose == true) {
        $.fancybox.close();
    }
})​

I've updated you're fiddle with this solution here.