如何自定义箭头和关闭按钮？

Posted 2023-05-07

【中文标题】如何自定义箭头和关闭按钮？

【英文标题】：How to customize arrows and close button?

【发布时间】：2013-11-27 07:53:45

【问题描述】：

我想自定义和定位（替换为自定义图像 jpg/png）箭头和关闭按钮。任何帮助将不胜感激。

【问题讨论】：

codepen.io/mgo/pen/ykgjb - 这是在文档中。你使用 css

【参考方案1】：

也许有点晚了，但我发现了一些东西：在定位按钮的情况下，magnific-popup 显然不是直截了当的。

它有选项closeBtnInside 应该将关闭按钮放在内容中。就我而言，此选项不起作用（显示图像时）。然后我尝试通过设置 mfp-close 类的顶部和右侧来更改 CSS 以定位关闭按钮。起初它似乎可以工作，但是当单击按钮时，它又回到了原来的位置。没有找到其他可能也需要更改的 CSS 类。

我最终自己设置了关闭按钮的 html（包括设置自己的图像）并使用内联样式定位关闭按钮：

var magnificPopupOptions =

   delegate: 'a',
   type: 'image',
   closeMarkup: '<button title="%title%" class="mfp-close" style="position: absolute; top: 30px; right: -15px"><img src="/Content/images/close-icon.png"  /></button>',
;
$('<Selector>').magnificPopup(magnificPopupOptions);

也应该适用于箭头按钮。

【讨论】：

您可以更改按钮表单 CSS 的 :focus 位置。 .mfp-close:hover, .mfp-close:focus 不透明度: 1; .mfp-close:active 顶部: 1px; 使顶部的值与您当前的位置相同，这样当您单击它时它就不会改变位置。