0

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

我为此使用 iframe fancybox 类型，将加载的内容是 html。我尝试使用 appendTo 但没有成功，关于如何将其拉出的任何想法？

花式框 js 文件：

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

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

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

2 回答 2

2

您可能不需要 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

于 2013-09-01T18:46:08.650 回答
0

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

就像parentEl: '.myDivClass'

于 2020-02-20T09:51:36.130 回答