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

【问题标题】：Opening a second fancybox Within another fancybox!打开第二个fancybox 在另一个fancybox 中！
【发布时间】：2015-05-23 18:58:14
【问题描述】：

嘿！我的花式盒子有问题！

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

但是，如果用户访问表单的 url - 我需要将表单显示在一个用 type:inline 调用表单的花式框中。这是第二个幻想框失败的地方，而不是弹出，而是在父幻想框之上，它替换了它 - 我的表单消失了。

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

【问题讨论】：

标签： javascript jquery fancybox

【解决方案1】：

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

【讨论】：

这是一个很大的失望！ :(我喜欢fancybox的简单性，但我想它是有代价的......我想我可以将验证消息切换到另一个灯箱解决方案。还有其他建议吗？
为什么不在表单字段旁边或作为工具提示显示验证错误？
好吧，工具提示会起作用，但我们需要更多地关注消息，它包含的信息比验证消息更多。当我说这是一种形式时，我并不完全诚实。这是一个带有反馈信息的预订模块。因此，正常的验证文本消息也不会很好地工作。任何人，我用另一个干净的弹出窗口解决了它。它运作良好。它实际上比使用看起来有点臃肿的“双”花式弹出窗口要好。谢谢。
好的。对于反馈消息，您可以使用 window.open() 打开另一个 url。它只会给出弹出窗口的外观。但它将是一个紧凑的窗口，而不是花式框/对话框类型的弹出窗口。

【解决方案2】：

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

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

当您关闭模态 2 并重新打开模态 1 时触发。

【讨论】：

【解决方案3】：

从可用性和设计的角度来看，您甚至都不应该尝试这样做，因为它确实是一种创建糟糕用户体验的可靠方式。这就是大多数模态框框架不支持它的原因。

一般来说，当你遇到不支持的东西时，无论是浏览器还是知名库，停下来想想是否有原因导致缺少支持，你通常会意识到缺少支持是设计使然。

【讨论】：

嗯，我既同意又不同意。它适用于我们更复杂的场景。阅读我上面的评论..但是是的。对于一个简单的表单，正常的验证消息将是要走的路。

【解决方案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;
  }
});

【讨论】：

【解决方案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
    });
});

【讨论】：