在div中加载fancybox内容？

Posted 2023-05-09

【中文标题】在div中加载fancybox内容？

【英文标题】：Load fancybox content inside div?

【发布时间】：2013-09-04 16:19:35

【问题描述】：

我正在尝试通过将内容放在一个 div 内（而不是将其浮动在屏幕中心）来更改 fancybox 2 的功能，该 div 最初将被隐藏，并将扩展以适应其内容。当点击关闭按钮时，div 将再次缩小并隐藏。

我为此使用 iframe fancybox 类型，将加载的内容是 html。 我尝试使用 appendTo 但没有成功，有什么想法可以解决这个问题吗？

fancybox js 文件：

overlay:f('<div class="fancybox-overlay"></div>').appendTo(b.parent||"body")

如果 appendTo myDiv 没有任何变化（内容仍然加载但在正文的中间）：

overlay:f('<div class="fancybox-overlay"></div>').appendTo("#myDiv")

【问题讨论】：

发布示例代码或jsfiddle

现在我使用了默认的 fancybox 代码，不知道如何在指定的 div 上加载它的内容，但这就是我没有发布任何代码的原因。

我认为你不需要 fancybox

【参考方案1】：

您可能不需要 fancybox，但可以创建自己的自定义脚本。

只是为了好玩，用这样的 html

<a class="myfancy" href="http://jsfiddle.net/">show my content in div</a>
<div id="targetContent"> 
    <a id="myClose" href="javascript:;">X</a>
    <iframe id="targetIframe"></iframe>
</div>

使用一些 CSS 来隐藏 #targetContent 之类的

#targetContent 
    position: relative;
    display: none;
    width: 500px;
    height: 350px;
    overflow: visible;
    background-color: #fff;

并根据需要设置关闭按钮 #myClose 的样式。

还像设置 iframe 的基本 CSS

#targetIframe 
    width: 100%;
    height: 100%;
    border: 0 none;

然后使用此代码将所有选择器绑定到它们的特定事件和回调以实现平滑过渡

jQuery(function ($) 
    // cache elements
    var $targetDiv = $("#targetContent"),
        $iframe = $targetDiv.find("#targetIframe"),
        $close = $targetDiv.find("#myClose");
    // bind click events to first link and close button
    $(".myfancy").on("click", function (e) 
        e.preventDefault();
        $iframe.attr(
            "src": this.href // add the content to iframe before showing
        ).parent($targetDiv).slideDown(500, function ()  //show div
            $close.fadeIn(200).on("click", function ()  
                $(this).fadeOut(100, function ()  // fade out close button
                    $targetDiv.slideUp(500, function ()  // hid div by sliding it up
                        $iframe.removeAttr("src"); // remove after closing the box
                    ); // slideUp
                ); // close fadeOut                
            ); // on click myClose
        ); // slideDown
    ); // on click link
); // ready

见JSFIDDLE

注意：.on() 需要 jQuery v1.7

【讨论】：

您的示例很棒，但我想使用 fancybox 以便能够对我的所有 html 页面以及关闭按钮和标题使用下一个/上一个功能。你认为在另一个 iframe 中添加fancybox 会像你的例子一样吗？这是一个显示我正在寻找的效果的网站，只需单击其中一个投资组合项：bybu.es

@zefs ：是的，它会的。查看这篇帖子***.com/a/8855410/1055987 的演示，它的行为类似于左侧 iframe。

谢谢，我会尝试的 :) 将您的答案标记为已接受，但如果我在此过程中遇到问题，会再次在此处发布。

所以，我又在考虑这个问题，为此使用 2 个 iframe 可能不是最好的方法。在您的示例中实现下一个/上一个按钮和“rel”功能（例如在 fancybox 上）会不会太难？

@zefs ：就我个人而言，我不会指望它，因为它可能真的有问题（我在回答这个问题时做了各种测试）......不过你可以试试。

【参考方案2】：

您可以在fancybox选项中添加一个选项parentEl，

就像parentEl: '.myDivClass'