Question

喂！我的fancyboxes出了问题！

我正在fancybox中发布一个表单。通常，它在iframe模式下由fancybox打开（因为它是作为来自其他域的小部件启动的）。在这个iframe中，我打开第二个fancybox来显示验证错误。 所有这些 - 效果很好。

但是，如果用户访问表单的网址 - 我需要在fancybox中显示该表单，该表单调用类型为inline的表单。这是第二个fancybox失败，而不是弹出，在父级fancybox上，它取代了它 - 我的形式消失了。

所以... 如何启动fancybox的多个实例？

Answer 1

坏消息是，fancybox是一个单实例脚本。在页面加载时，它会创建所有叠加DIV。与fancybox绑定的所有链接和其他元素将重新使用这些叠加。使fancybox处理多个实例需要或多或少更大的覆盖脚本。

Answer 2

我通过使用afterClose实现了这一点，并重新打开了我以前的fancybox

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

当您关闭模态2并重新打开模态1时会激活。

Answer 3

从可用性和设计角度来看，你甚至都不应该尝试这种方式，因为它是一种创造可怕用户体验的可靠方法。这就是大多数模态框框架不支持它的原因。

一般情况下，如果您遇到不受支持的事情，无论是浏览器还是知名图书馆，请停下来思考是否有理由缺少支持，而且往往会意识到缺少的支持是设计的。

Answer 4

我已设法通过beforeClose回调来实现此目的。

基本上，在窗口关闭之前，设置超时功能以打开另一个窗口并在回调中返回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;
  }
});

Answer 5

如果您使用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
    });
});

在另一个fancybox中打开第二个fancybox！

5 个答案: