当我点击箭头时关闭放大弹出窗口（右/左）

Question

我正在为画廊使用magnific-popup 插件，并且我使用fonts-awesome 字体中的箭头更改了默认箭头样式，但是在打开画廊并开始单击右/左箭头后，在特定区域中弹出窗口关闭。 . 这里jsfiddle演示

$('.related-gallery').magnificPopup({
            type: 'image',
            gallery:{
                enabled:true,
                arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow custom-mfp-arrow-%dir%"><i class="fa fa-angle-%dir% fa-4x"></i></button>'
            },
            zoom: {
                enabled: true, // By default it's false, so don't forget to enable it

                duration: 300, // duration of the effect, in milliseconds
                easing: 'ease-in-out', // CSS transition easing function 

                // The "opener" function should return the element from which popup will be zoomed in
                // and to which popup will be scaled down
                // By defailt it looks for an image tag:
                opener: function(openerElement) {
                  // openerElement is the element on which popup was initialized, in this case its <a> tag
                  // you don't need to add "opener" option if this code matches your needs, it's defailt one.
                  return openerElement.is('img') ? openerElement : openerElement.find('img');
                }
            }
        });

Answer 1

我可以通过将 mfp-prevent-close 类添加到我的 FontAwesome 图标来解决此问题。

因此，您在图库中的 arrowMarkup 设置将是：

arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow custom-mfp-arrow-%dir%"><i class="fa fa-angle-%dir% fa-4x mfp-prevent-close"></i></button>'

如果没有该类，它会将自定义箭头的点击读取为背景点击 - 这就是 DigitalDouble 禁用背景点击以关闭图库的解决方案有效的原因。您会注意到，即使画廊正在关闭，它也会短暂显示下一张图片。所以导航仍然正常工作，它只是有关闭画廊的额外动作:)

Answer 2

尝试在配置中添加这个：

closeOnBgClick: false