Opening a second fancybox Within another fancybox!

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?

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.

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.

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.

I've managed to do this by using the beforeClose callback.

Basically, before the window closes, set a timeout function to open the other window and return false in the callback to prevent Fancybox from closing the window.

$.fancybox( $secondWindow, {
  beforeClose : function() {
    // Set timeout to open the other Fancybox window.
    setTimeout(function() {
      $.fancybox( $firstWindow );
    }, 10);

    // Return false to prevent the Fancybox from closing.
    return false;
  }
});

You can achieve this if you open first fancybox with iframe:

//popup product details in product list
$('.AT3PLPopUpButton').click(function (event) {
    event.preventDefault();
    var target = $(event.target);
    var elAT3Product = $(target.closest(".AT3Product"));
    var productId = elAT3Product.attr('data-productid');
    $.fancybox({
        width: '80%',
        height: '80%',
        href: '/desktopmodules/atena3/productdetails.aspx?productid=' + productId,
        type: 'iframe',
        openEffect  : 'none',
        closeEffect: 'none',
        autosize    : true
    });
});