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

Question

嘿！我在使用fancybox时遇到了麻烦！

我正在fancybox中启动一个表单。通常情况下，由于它是从其他域名启动的小部件，所以它以iframe模式打开。在这个iframe中，我又打开了第二个fancybox来显示验证错误。所有这些都运行良好。

但是，如果用户访问表单的url，我需要在以type:inline方式调用表单的fancybox中显示表单。这就是第二个fancybox失败的地方，它没有弹出到父fancybox上，而是取代了它，我的表单消失了。

那么...我该如何启动多个fancybox实例？

- Anders

Answer 1

坏消息是，Fancybox 是一种单实例脚本。加载页面时，它会创建所有叠加 DIV。与 fancybox 绑定的所有链接和其他元素都将重复使用这些叠加层。要使 fancybox 处理多个实例，需要对脚本进行更大的重写。

- Rafael

---

这太让人失望了！ :( 我喜欢fancybox的简单性，但我想它是有代价的... 我猜我可以将验证消息切换到另一个灯箱解决方案。还有其他建议吗？ - Anders

为什么不在表单字段旁边或作为工具提示显示验证错误？ - Rafael

好的，工具提示可能有效，但我们需要更多地关注包含比验证消息更多信息的消息。当我说这是一个表单时，我并不完全诚实。它是一个带有反馈消息的预订模块。因此，正常的验证文本消息也不太适用。无论如何，我用另一个干净的弹出窗口解决了这个问题。它很好用。实际上，它比使用“双重”fancybox弹出窗口更好，后者看起来有点臃肿。谢谢。 - Anders

好的。对于反馈信息，您可以使用window.open()打开另一个URL。它会看起来像弹出窗口，但它将是一个紧凑的窗口，而不是fancybox/对话框类型的弹出窗口。 - ﻂﺎﻫﺭ ﻏﻔﺎﺮ

Answer 2

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

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

当你关闭模态框2并重新打开模态框1时，此事件触发。

- bladefist

Answer 3

从可用性和设计的角度来看，您永远不应该尝试这样做，因为这是创建可怕用户体验的一种确定的方法。这就是为什么大多数模态框架不支持它的原因。

通常，当您遇到不受支持的事物时，无论是由浏览器还是由知名库引起的，都要停下来思考是否有缺少支持的原因，往往您会意识到缺少支持是有意而为之的。

- Martin Jespersen

---

我既同意又不同意。对于我们更复杂的情况，它运行良好。请阅读我上面的评论...但是，对于简单的表单，普通的验证消息是正确的选择。 - Anders

Answer 4

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

- Tone Škoda

Answer 5

我通过使用 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;
  }
});

- noplanman