如何防止关闭

Question

我的弹出窗口中有一些表单控件，如果表单无效，我想阻止用户关闭它。

我只是作为测试尝试过，但是当用户单击关闭按钮等时，弹出窗口仍然关闭。

$.magnificPopup.open({
            items: {
                src: '#topic'
            },
            type: 'inline',
            removalDelay: 500, //delay removal by X to allow out-animation
            mainClass: 'mfp-3d-unfold',
            closeMarkup: '<button title="Close (Esc)" type="button" class="mfp-close"></button>',
            midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
            callbacks: {
                beforeClose: function () {
                    // Callback available since v0.9.0
                    return false;
                },
                close: function () {
                    // Will fire when popup is closed
                    return false;
                }
            }
        });

Answer 1

根据文档，如果您将closeOnContentClick: false 添加为选项，则窗口不应关闭。

magnificPopup.open({
            items: {
                src: '#topic'
            },
            type: 'inline',
            closeOnContentClick: false,
            removalDelay: 500, //delay removal by X to allow out-animation
            mainClass: 'mfp-3d-unfold',
            closeMarkup: '<button title="Close (Esc)" type="button" class="mfp-close"></button>',
            midClick: true
        });

但是，我一直试图让一个 ajax 窗口在它（一个表单）内部有点击时不关闭，添加这个选项根本不起作用（它可能会起作用不过对于内联）。到目前为止，我能够让它工作的唯一方法是向弹出窗口中的所有子节点添加一个 mfp-prevent-close 类（例如，所有表单输入字段、周围的字段集等）。

希望这有帮助:)

Answer 2

我终于在GitHub找到了解决方案

需要替换下面这行代码

// if click is outside the content
if( (target !== mfp.content[0] && !$.contains(mfp.content[0], target)) ) {

与

// if click is outside the content
if( (target !== mfp.content[0] && !$.contains(mfp.content[0].parentElement, target)) ) {

它为我解决了问题。