放大弹出替换默认关闭按钮答案

【问题标题】：magnific pop up replace default close button放大弹出替换默认关闭按钮
【发布时间】：2017-12-13 00:13:02
【问题描述】：

我想用圆形 .png 图像中的经典灯箱十字替换默认的“X”关闭按钮，但似乎找不到可以尝试的示例。请假设我不知道。我已经尝试过一些现有的 CSS 用于定位和颜色：

<style>
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close{
top: -18px !important;
right: -18px !important;
color: white !important;
}
.mfp-image-holder .mfp-close:hover, .mfp-iframe-holder .mfp-close:hover{
top: -18px !important;
right: -18px !important;
color: red !important;
}
</style>

这很好。我应该说我在 WYSIWYG Web Builder 12 软件中使用它，这意味着我必须覆盖包生成的默认 CSS。

问候罗杰

【问题讨论】：

标签： magnific-popup

【解决方案1】：

我找到了适合我的答案。添加到 document.ready 脚本中

callOpen: function (scr,data,$this) {
setTimeout(function() {
$('.mfp-close').html('').append('<img class="mfp-closer"
src="magnific/close.png" width="40px" height="40px"/>');
$('.mfp-closer').click(function() {$('.mfp-close').trigger('click')});
$('.mfp-close').on('mouseover', function () {
$(this).find('img').attr('src', 'magnific/closeRed.png');
}).on('mouseout', function () {
$(this).find('img').attr('src', 'magnific/close.png');
});
}, 0);
},

【讨论】：