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)) ) {

它解决了我的问题。

如何防止关闭

2 个答案: