Question

我在弹出窗口之间创建了导航：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示例中，因为源是内联的，所以没有发生。

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

Answer 1

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

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

1 个答案: