undefined is not an object with magnificpopup.close

I have a custom close button within a popup using magnificPopup. The close button works in FireFox however not in Chrome or Safari. In Safari I get the following error:

undefined is not an object (evaluating 'jQuery.magnificPopup.close')

This is my JS:

jQuery(document).ready(function($) {
    setTimeout(function() {
        if ($('#cookies-message').length) {
            $.magnificPopup.open({
                items: {
                    src: '#cookies-message' 
                },
                type: 'inline'
            });
        }
    }, 1000);
});

jQuery(document).on('click', '.popup-modal-dismiss', function (e) {
    //e.preventDefault();
    jQuery.magnificPopup.close();
});

<div id="cookies-message" class="cookie-message mfp-hide">
    <img src="/wp-content/themes/site/img/cookies.svg">
    <p>… but we also use them to give you the best experience on our website, which is full of other healthy solutions</p>
    <p><a class="popup-modal-dismiss" href="#">OKIDOKI</a></p>
</div>

You may be loading magnificPopup before jQuery is loaded, in which case it won't be available on the jQuery object.

You should be able to safely access magnificPopup using $.magnificPopup.