jquery - 将 HTML 插入到 fancybox 关闭按钮

Question

我想为 fancybox 关闭按钮使用 html 而不是图像。

这是我认为应该起作用的：

$('.fancybox-media').fancybox({
    afterLoad : function() {
        $('div.fancybox-close').html('X');
    }
});

只关注这里的关闭按钮。任何想法为什么这不起作用？

Answer 1

对于fancybox v2.x，您可以使用该选项tpl来设置您想要的任何html

$(".fancybox").fancybox({
 tpl: {
  closeBtn: '<div title="Close" id="myCloseID ">[CLOSE]</div>'
 }
});

请注意，在此示例中，我将自己的选择器id="myCloseID "设置为close容器 ( closeBtn)，因此我可以将自己的 css 样式添加到新的 html 中，例如：

#myCloseID {
 position: absolute; /* this is important */
 z-index: 8040; /* this is important */
 top: -18px; /* or whatever needed */
 right: -10px;
 width: 50px; /* or whatever needed */
 height: 36px;
 cursor: pointer;
 color : #ff0034; /* or whatever needed */
 /* etc. */
}

最终，您可能更喜欢将默认值tpl用于closeBtn您自己的 html

$(".fancybox").fancybox({
 tpl: {
  closeBtn: '<div title="Close" class="fancybox-item fancybox-close">[my closing html]</div>'
 }
});

...只需通过 css 删除背景图像

.fancybox-close {
 background-image: none; /* prevents the use of the fancybox sprite */
 color : #ff0034; /* or whatever needed, etc. */
 /* etc. */
}

Answer 2

它应该可以工作，但您还需要background将none.

试试这个：

$('div.fancybox-close').html('X').css({background:'none',color:'white'});

Answer 3

请试试这个

$('.fancybox-close').html('X').css({background:'none',color:'white'});