The below attributes in magnific popup will help you to close the popup window,

closeOnBgClick: if it is true, the popup will close whereever click on outside the content(black overlay). To prevent this, assign the value false to close only when click on X (close) button in top right cornor of popup. By defualt, true is assigned for this attribute.

enableEscapeKey: if it is true, the popup will close when click the escape key. To prevent this, assign the value false to close only when click on X (close) button in top right cornor of popup. By defualt, true is assigned for this.

Hope that these points may help you.!

MagnificPopup stores a single instance in the jQuery var ($.magnificPopup), which controls the popup's behavior in the DOM. It's actually really easy to update the background click behavior by changing a single setting.

$.magnificPopup.instance.st.closeOnBgClick = false

Internally, MFP uses $.detach() and $.append() to control the presence of the close button. To remove it, we can duplicate the way it works in _close() by calling:

$.magnificPopup.instance.currTemplate.closeBtn.detach()

Re-adding it is a bit more difficult because the library uses a private function called _getCloseBtn() to generate the element. Fortunately we can just re-append it from the same place we removed it.

$.magnificPopup.instance.content.append($.magnificPopup.instance.currTemplate.closeBtn)

Source: https://github.com/dimsemenov/Magnific-Popup/blob/c8f6b8549ebff2306c5f1179c9d112308185fe2c/dist/jquery.magnific-popup.js

Demo page used for testing: https://dimsemenov.com/plugins/magnific-popup/

If your snippet is located in your main js, the ajax popup button may not be binded to the event. I imagine two solutions :

Use "on" instead of "click" :(not tested)

$('#close').on( "click", function() {
  $.magnificPopup.close();
});

Or do it that way : (tested)

add this function in your main js

function closePopup() {
  $.magnificPopup.close();
}

And use this kind of button in your popup html

<button type="button" onClick="closePopup();">Close</button>

Iframe :

If your button is located in an iframe and the magnificpopup script in the main window, on the same domain, you can access the above function like this :

<button type="button" onClick="parent.closePopup();">Close</button>

This is the old thread but for all the future readers: to fix this, there has to be only one root element in the html that comes out from the ajax call:

As per documentation:

http://dimsemenov.com/plugins/magnific-popup/documentation.html#ajax_type

So in your ajax call you should return something like this:

<div>    
    ...your html content 
</div>

and your popup will no longer close itself on content click.

Slight adjustment ,check fiddle :)

$('.popup-modal').magnificPopup({

type: 'inline',
modal: false,

});

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

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

Just use $.magnificPopup.close()

After some digging found history.js and then the following

var magnificPopup = null;
jQuery(document).ready(function ($) {
    var $img = $(".img-link");
    if ($img.length) {
        $img.magnificPopup({
            type: 'image',
            preloader: true,
            closeOnContentClick: true,
            enableEscapeKey: false,
            showCloseBtn: true,
            removalDelay: 100,
            mainClass: 'mfp-fade',
            tClose: '',
            callbacks: {
                open: function () {
                    History.Adapter.bind(window, 'statechange', closePopup);
                    History.pushState({ url: document.location.href }, document.title, "?large");
                    $(window).on('resize', closePopup);
                    magnificPopup = this;
                },
                close: function () {
                    $(window).unbind('statechange', closePopup)
                        .off('resize', closePopup);
                    var State = History.getState();
                    History.replaceState(null, document.title, State.data["url"]);
                    magnificPopup = null;
                }
            }
        });
    }
});

function closePopup () {
    if (magnificPopup != null)
        magnificPopup.close();
}