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

Question

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

Answer 1

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

它有选项 closeBtnInside这应该将关闭按钮放在内容中。在我的情况下，此选项不起作用(显示图像时)。然后我尝试通过为类设置 top 和 right 来更改 CSS mfp-close定位关闭按钮。起初它似乎有效，但是当单击按钮时它移回了旧位置。没有找到其他可能也需要更改的 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" width="25" height="29"/></button>',
};
$('<Selector>').magnificPopup(magnificPopupOptions);

也应该适用于箭头按钮。