插入HTML到fancybox关闭按钮

Question

我希望使用HTML代替图片作为fancybox关闭按钮。

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

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

这里只关注关闭按钮。有什么想法为什么它不能工作？

- DavidVII

Answer 1

对于fancybox v2.x，您可以使用选项tpl来设置所需的任何HTML，例如：

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

请注意，在此示例中，我将自己的选择器id="myCloseID "设置为close容器（closeBtn），以便可以向新的html添加自己的css样式。

#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. */
}

- JFK

---

非常抱歉我回复晚了。在我实施你的修复之前，客户最终停止了这个项目。不过，我回头测试了一下，结果非常完美！谢谢！ - DavidVII

哦，而且，我只需要 tpl 部分。 - DavidVII

哦，如果有人感兴趣，这里有一个可用的示例：http://codepen.io/DavidVII/full/qJxnf - DavidVII

Answer 2

这应该可以工作，但您还需要将 background 设置为 none。

试试这个：

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

- Moin Zaman

---

谢谢您的回复，Moin。不幸的是，那并没有起作用。 - DavidVII

你确定吗？X 可能是黑色字体，看不见吗？ - Moin Zaman

是的，非常确定。我已经在CSS中将颜色更改为白色，与黑色背景相对应。但仍然没有显示出来。 - DavidVII

在 afterLoad 中使用 alert 会起作用吗？您可以尝试使用 afterShow 回调函数代替 afterLoad。 - Moin Zaman

你能否在 jsbin.com 或 jsfiddle.net 上放置一份你的代码演示？ - Moin Zaman

Answer 3

请尝试这个。

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

- gaurang171

---

这基本上是Moin所说的相同的事情。很抱歉，它也不起作用。 - DavidVII