Question

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

以下是我认为应该有效的方法：

$('.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'});

将HTML插入fancybox关闭按钮

3 个答案: