jquery - FancyBox 可以在特定的 div 中打开而不是在整个浏览器中打开吗？

Question

不确定这是否可能，但我想我会问。是否可以在另一个 div 中打开内容？目前 FancyBox 在整个浏览器的视口中打开内容，但我只希望它在特定的 div 中打开。

所以一个特定的用例，我有一个大图像，我想在大图像中显示较小的图像，而不是整个浏览器页面。

Answer 1

不确定您是否已经找到解决此问题的方法，但我已经取得了一些进展。我使用的是 2.1.5 版本并且一直在编辑 jQuery 本身。我首先对“body”进行了搜索和替换，并将所有这些值更改为我希望在其中打开的指定 div。然后查找“F.helpers.overlay”行并找到选项“el : $('html'),”并将'html'更改为您指定的div。

它仍然在整个窗口中打开，但我目前正在调整 css，因为这就是此时控制其位置的原因。希望这个对你有帮助

编辑：好的，我已经弄清楚了！

所以我必须将“位置：相对”设置为我放置fancybox的div。然后我不得不添加这些样式“yourContainer .fancybox-overlay-fixed { position: absolute;}”来覆盖导致fancybox覆盖整个窗口的“固定定位”。如果您按照我上面输入的步骤以及我的编辑中的这些步骤进行操作，它应该对您有用！如果您有任何问题，请告诉我。

另外，我知道这个问题很老，但我敢肯定其他人会遇到这个寻找相同的解决方案。希望我对以后遇到这个问题的你们中的一些人有所帮助

Answer 2

从 3.0 版开始，您可以声明要在哪个元素中注入 fancybox。

这是文档：https ://www.luciadallas.com/js/fancybox3/docs/

// Container is injected into this element
parentEl: "body",

如果您希望将 fancybox 注入带有 class 的特定 div 中product-menu，请使用以下代码：

parentEl: ".product-menu"

Answer 3

嗯，FancyBox 有大量的选项和方法，所以只要有一些聪明的想法，你就可以完成这个。

但听起来你可以很容易地为这个用例自己制作一些东西，使用一些聪明的 jquery。