javascript 在另一个花式盒子中打开第二个花式盒子！
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5880245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Opening a second fancybox Within another fancybox!
提问by Anders
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.
我正在fancybox 中启动一个表单。通常，它由fancybox 在iframe 模式下打开（因为它是作为来自其他域的小部件启动的）。在这个 iframe 中，我打开了第二个花式框来显示验证错误。所有这些 - 效果很好。
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.
但是，如果用户访问表单的 url - 我需要将表单显示在使用 type:inline 调用表单的花式框内。这是第二个fancybox失败的地方，它没有弹出父fancybox，而是替换它 - 我的表单消失了。
So... how do i launch multiple instances of fancybox?
那么......我如何启动多个fancybox实例？
回答by Rafael
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.
坏消息是，fancybox 是一个单实例脚本。在页面加载时，它会创建所有覆盖 DIV。与fancybox 绑定的所有链接和其他元素将仅重用这些叠加层。使fancybox 处理多个实例需要对脚本进行或多或少更大的覆盖。
回答by bladefist
I achieved this by using afterClose, and re-opening my previous fancybox
我通过使用 afterClose 实现了这一点，然后重新打开我以前的花式盒子
$('#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.
当您关闭模态 2 并重新打开模态 1 时会触发此事件。
回答by Martin Jespersen
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.
一般来说，当你遇到不支持的东西时，无论是浏览器还是知名库，停下来想想是否有缺少支持的原因，而且通常你会意识到缺少的支持支持是设计的。
回答by noplanman
I've managed to do this by using the beforeClosecallback.
我设法通过使用beforeClose回调来做到这一点。
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.
基本上，在窗口关闭之前，设置一个超时函数打开另一个窗口并在回调中返回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;
}
});
回答by Tone ?koda
You can achieve this if you open first fancybox with iframe:
如果您使用 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
});
});
