Opening a second fancybox Within another fancybox!

Question

Hey! I'm having trouble with my fancyboxes!

I am launching a form within a fancybox. Normally, its opened by fancybox in a iframe mode (since it's being launched as a widget from other domains). Within this iframe, i am opening a second fancybox to display validation errors. All this - works good.

But, if a user visists the url to the form - i need the form to be displayed within a fancybox thats calling the form with type:inline. This is where the second fancybox fails, instead of popping out, over the parent fancybox, it replaces it - and my form disappears.

So... how do i launch multiple instances of fancybox?

Answer 1

The bad news is, fancybox is a single-instance script. On page load it creates all overlay DIVs. All links and other elements bound with fancybox will just re-use these overlays. Making fancybox handle multiple instances would require a more or less bigger overwrite of the script.

Answer 2

I achieved this by using afterClose, and re-opening my previous fancybox

   $('#modal-2-button').fancybox({
    afterClose: function () {
        $.fancybox($('#modal-1-button'), { maxWidth: 810 });
    }
});

This fires when you close modal 2 and it re-opens modal 1.

Answer 3

From a usability and design perspective you should never even attempt this, since it is a sure fire way of creating a horrible user experience. This is why most modal box frameworks do not support it.

In general when you run in to things that are not supported, whether this be by the browser or by a well known library, stop and think if there is a reason for the missing support, and more often than not you will realize that the missing support is by design.