javascriptjqueryfancybox

Make open fancybox modal


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.net/vCtVq/


Solution

  • 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.net/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.net/MLjAT/