在另一个fancybox中打开第二个fancybox！
嘿! 我的fancyboxes出了问题！
我正在fancybox中发布一个表单。 通常，它在iframe模式下由fancybox打开（因为它是作为来自其他域的小部件启动的） 。 在这个iframe中，我打开第二个fancybox来显示validation错误。 所有这些 – 效果很好。
但是 ，如果用户访问表单的URL – 我需要在fancybox中显示该表单，该表单调用类型为inline的表单。 这是第二个fancybox失败，而不是弹出，在父级fancybox上，它取代它 – 我的forms消失了。
那么…… 我如何启动fancybox的多个实例？
坏消息是，fancybox是一个单实例脚本。 在页面加载时，它会创建所有叠加DIV。 与fancybox绑定的所有链接和其他元素将重新使用这些叠加。 使fancybox处理多个实例需要或多或少更大的脚本覆盖。
我通过使用afterClose实现了这一点，并重新打开了我以前的fancybox
$('#modal-2-button').fancybox({ afterClose: function () { $.fancybox($('#modal-1-button'), { maxWidth: 810 }); } }); 当你关闭模态2并重新打开模态1时会激活。
从可用性和设计的角度来看，你甚至都不应该尝试这种方式，因为它是一种创造可怕用户体验的可靠方法。 这就是大多数模态框框架不支持它的原因。
一般情况下，当您遇到不受支持的事情时，无论是浏览器还是知名图书馆，请停下来思考是否有缺失支持的原因，而且往往会发现缺失支持是设计的。
我已经设法通过使用beforeClose回调来做到这一点。
基本上，在窗口关闭之前，设置超时function以打开另一个窗口并在回调中返回false以防止Fancybox关闭窗口。
$.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; } });
如果您使用iframe打开第一个fancybox，则可以实现此目的：
//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 }); });