如何修改 Magnific Popup 中的关闭按钮行为？答案

【问题标题】：How to modify the Close button behavior in Magnific Popup?如何修改 Magnific Popup 中的关闭按钮行为？
【发布时间】：2014-02-05 12:53:13
【问题描述】：

我在弹出窗口之间创建了导航：JS Fiddle

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="magnific-popup-0.9.9/magnific-popup.css" type="text/css" />
<style type="text/css">
    .popup {
        position: relative;
        background-color:rgba(255,255,255,1);
        padding: 20px;
        width: auto;
        border: 1px solid #cccccc;
        max-width: 500px;
        margin: auto;
    }
</style>
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="magnific-popup-0.9.9/magnific-popup.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var html = {
        'a': '<div class="popup"><h1>Page a</h1><p><button id="page-a-button">Go to Page b</button></p></div>',
        'b': '<div class="popup"><h1>Page b</h1></div>'
    };
    function thePopup(params) {
        if (!params.page) {
            $.magnificPopup.instance.close();
            return;
        }
        $.magnificPopup.open({
            items: { src: html[params.page], type: 'inline' },
            callbacks: {
                open: function () {
                    $('#page-a-button').click(function () {
                        params.page = 'b';
                        thePopup(params);
                    });
                },
                afterClose: function () {
                    params.page = {
                        'a': null,
                        'b': 'a'
                    }[params.page];
                    thePopup(params);
                }
            }
        });
    }
</script>
</head>
<body>
<button id="the-button">Click me</button>
<script type="text/javascript">
    $('#the-button').click(function () {
        var params = {
            page: 'a'
        };
        thePopup(params);
    });
</script>
</body>
</html>

我遇到的问题是真正的应用程序从需要一段时间才能到达的 ajax 调用中获取弹出窗口内容。然后，当用户单击关闭 X 时，弹出窗口的关闭和打开很烦人。在 JS Fiddle 示例中不会发生，因为源是内联的。

是否可以更改关闭触发器的关闭行为以不真正关闭弹出窗口并让我以编程方式执行此操作？

【问题讨论】：

标签： jquery css magnific-popup

【解决方案1】：

在http://dimsemenov.com/plugins/magnific-popup/documentation.html 的FAQ 中有一节叫做“如何在不修改源文件的情况下覆盖某些功能？”。在那里你应该找到如何覆盖关闭函数的答案。

【讨论】：