Opening a second fancybox As part of another fancybox!

Question

Hey! I have problems with my fantasy boxes!

I run the form inside fancybox. Usually it opens fancybox in iframe mode (since it starts as a widget from other domains). Inside this iframe, I open a second fancybox to display validation errors. All this works well.

But , if the user is viewing the URL of the form, I need a form to display in fancybox, which calls the form with type: inline. This is where the second fancybox fails, instead of popping up, over the parent fancybox, it replaces it - and my form disappears.

So ... How to run multiple instances of fancybox?

Answer 1

The bad news: fancybox is a single instance of a script. When the page loads, it creates all the overlay DIVs. All links and other elements related to fancybox will simply reuse these overlays. Creating multiple instances of fancybox will require a more or less large rewrite of the script.

Answer 2

I achieved this using afterClose and reopening my previous fancybox

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

This works when you close modal 2 and it opens the modal number again.

Answer 3

In terms of usability and design, you should never try to do this, as it is a reliable way to create an awful user interface. This is why most modal frameworks do not support it.

In general, when you go to things that are not supported, whether it is a browser or a well-known library, stop and think if there is a reason for the lack of support, and most often you will realize that the missing design support.

Answer 4

I managed to do this using the beforeClose .

Basically, before closing the window, set the timeout function to open another window and return false in the callback so that Fancybox does not close 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; } }); 

Answer 5

You can achieve this if you open the first fancybox with an 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 }); });