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

发布于 2024-11-04 19:31:32 字数 360 浏览 1 评论 0原文

嘿！我的花式盒子遇到了麻烦！

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

但是，如果用户访问表单的 url - 我需要将表单显示在使用 type:inline 调用表单的 fancybox 中。这是第二个 fancybox 失败的地方，它没有弹出，而是替换了父 fancybox - 并且我的表单消失了。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

世界等同你 2024-11-11 19:31:32

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

回复收藏 0 原文

幸福还没到 2024-11-11 19:31:32

我通过使用 afterClose 并重新打开我之前的 fancybox 来实现此目的

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

。当您关闭模态 2 并重新打开模态 1 时，该事件会触发。

I achieved this by using afterClose, and re-opening my previous fancybox

   $('#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.

回复收藏 0 原文

碍人泪离人颜 2024-11-11 19:31:32

从可用性和设计的角度来看，您甚至不应该尝试这样做，因为这肯定会造成可怕的用户体验。这就是为什么大多数模态框框架不支持它的原因。

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

回复收藏 0 原文

软的没边 2024-11-11 19:31:32

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

I've managed to do this by using the beforeClose callback.

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.

$.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;
  }
});

回复收藏 0 原文

难忘№最初的完美 2024-11-11 19:31:32

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

You can achieve this if you open first fancybox with iframe:

//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
    });
});

回复收藏 0 原文

~没有更多了~