将HTML插入fancybox关闭按钮

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 "设置为closecontainer(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. */
}