单击页面关闭弹出窗口上的任意位置 - 精彩弹出窗口

Question

我正在使用Magnific Popup。

我想在单击页面关闭弹出窗口的任意位置时关闭弹出窗口。

这是我的代码小提琴：

http://jsfiddle.net/qweWa/24/

法典：

$('.popup-modal').magnificPopup({
    type: 'inline',
    modal: true,
});
$(document).on('click', '.closePopup', function (e) 
            {
                e.preventDefault();
                $.magnificPopup.close();
});

Answer 1

轻微调整，检查小提琴:)

$（'.popup-modal'）.magnificPopup（{

type: 'inline',
modal: false,

}）;

> $(document).on('click', '.closePopup', function (e) 
>             {
>                 e.preventDefault();
>                 $.magnificPopup.close();
>             });

http://jsfiddle.net/qweWa/27/

Answer 2

您需要

设置modal: false

演示小提琴

Answer 3

模态：设置为 true 时，弹出窗口将具有类似模态的行为：无法通过常规方式（关闭按钮、转义键或单击叠加层）将其关闭。

$('.popup-modal').magnificPopup({
    type: 'inline',
    modal: false
});

Answer 4

来自 Magnific-Popup 文档 实际上没有必要显式设置modal:false。大多数答案都做到了。

如果你

浏览文档，你会发现，如果你甚至不传递模态属性，它就可以工作。我已经根据您的要求编辑了JSFiddle。我认为在这种情况下可以避免不必要的覆盖属性。

只是这些就好了：

$('.popup-modal').magnificPopup({
    type: 'inline',
});

注意

：不要忘记注意这个答案与其他答案的区别。