CODEWITHSUNDEEP
jquerycssmagnific-popup
Clodoaldo Neto
Clodoaldo Neto

Reputation: 125284

How to modify the Close button behavior in Magnific Popup?

I have created a navigation between popups: 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>

The problem I have is that the real application gets the popups contents from ajax calls that take a while to arrive. Then when the user clicks the close X the closing and opening of the popups are annoying. In the JS Fiddle example that does not happen because the source is inline.

Is it possible to alter the close behavior of the close trigger to not really close the popup and let me do that programatically?

Upvotes: 1

Views: 4695

Answers (1)

user537787
user537787

Reputation:

In the FAQ of http://dimsemenov.com/plugins/magnific-popup/documentation.html there is a section called "How to override some function without modifying the source files?". There you should find the answer how to override the close function.

Upvotes: 2

Related Questions