Magnific Popup Jquery: Ajax Popup is not working

Question

I am trying to show a web page content in popup window using Magnific Popup jquery

I am using ajax type to show content.

I tried the below code.

HTML:

<a class="ajax" href="http://www.google.com">
        Text
</a>

JQuery:

<script type="text/javascript">
        $(document).ready(function() {
            $('.ajax').magnificPopup({
                delegate: 'a',
                type: 'ajax',
                alignTop: true,
                overflowY: 'scroll' // as we know that popup content is tall we set scroll overflow by default to avoid jump
            }
        }

    });
        });
</script>

Please check the JSFIDDLE

In terms of Jquery I am a novice. What I did wrong here?

Answer 1

The problem are your external links. they can't be load/interpreted correctly cause the wrong MIME type.

http://dimsemenov-static.s3.amazonaws.com/dist/magnific-popup.css
http://dimsemenov-static.s3.amazonaws.com/dist/jquery.magnific-popup.min.js

Here is the fiddle with working external resources.

The "real" problem is that it don't work with a link on an other origin.

ERROR: Refused to display ' https://www.google.de/?gws_rd=ssl ' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.