Question

发现了几个类似的问题，但没有找到这个具体问题的答案。

有没有办法在FancyBox2模式/弹出窗口的顶部和底部添加标题？

我知道如何将标题定位到顶部或底部。但是需要在顶部添加标题，在底部添加标题。

感谢所有提前..

Answer 1

您可以修改默认的fancybox模板以添加一些额外的HTML。如下所示：

您的HTML：

<a href='http://www.bbc.co.uk/news' class="fancybox" data-caption="caption here" title="Title here">Click</a>

使用Javascript：

$(".fancybox").fancybox({
    type: 'iframe',
    beforeLoad: function() {
        var caption = this.element.attr('data-caption');
        this.tpl.wrap = '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div><p>'+caption+'</p></div></div></div>'

    },

    helpers:  {
        title : {
            type : 'inside',
            position: 'top'
        }
    }
});

我以iFrame为例，但这适用于任何Fancybox类型。

JS小提琴： http://jsfiddle.net/WillDonohoe/thy0om73/

查看fancybox文档的tpl部分，了解更多信息：http://fancyapps.com/fancybox/#docs

FancyBox2 - 顶部和底部的标题？

1 个答案: