启用模式时缺少 Magnific Pop 关闭按钮答案

【问题标题】：Magnific Pop close button missing when modal is enabled启用模式时缺少 Magnific Pop 关闭按钮
【发布时间】：2017-10-30 10:02:09
【问题描述】：

我正在使用Magnific Popup jquery 插件在模态框内显示灯箱（图库）。我的代码如下：

$.magnificPopup.open({
        items:items,
        type:'image',
        modal:true, 
        closeOnContentClick:true, 
        closeOnBgClick:true, 
        showCloseBtn:true, 
        enableEscapeKey:true,
        gallery: {
          enabled: true,
          preload: [0,3], 
        },          
        removalDelay: 500,
        mainClass: 'mfp-fade',      
    });

我需要将modal 设置为true 否则，灯箱库往往会意外关闭。这是许多灯箱中发生的已知问题。这个modal 到true 设置的缺点是关闭按钮不起作用。

有没有遇到类似情况的人找到解决方案？

【问题讨论】：

标签： javascript jquery magnific-popup

【解决方案1】：

你和我一样。我已经解决了这个问题，比如下面的代码。

$.magnificPopup.open({
    items: {
        src: '#modifyDialog',
        type: 'inline',
        focus: '#engTxtareaModify',
    },

    modal: true,
    fixedContentPos: true,
    callbacks: {
        open: function () {
            var html = "<button title='Close (Esc)' type='button' class='mfp-close'></button>";
            $('.modifyDialog').append(html);
        }
    }
})

因此，您可以检查该 HTML 代码。然后，我添加了一个 css 代码。

.mfp-close {  color: #333; }

希望对你有所帮助。

【讨论】：