Question

我想用圆形.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。

此致罗杰

Answer 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);
},

magnific pop up替换默认关闭按钮

1 个答案: