How to display quiz using Magnific-popup with ajax <p>I am attempting to implement the ability to download a quiz, and display it in a lightbox, with a single mouse click. I got all the ajax stuff working, and I think am using Magnific-popup correctly, but the "lightbox" is missing. Instead all I see is the text, left justified, on the dark background.</p> <p>I reduced the jQuery code to be the minimum necessary to duplicate the issue:</p> <pre><code>$('.els-ajax-popup').magnificPopup({ type:'ajax', callbacks: { parseAjax: function (ajaxResponse) { ajaxResponse.data = "&lt;div class='wrapper'&gt;&lt;p&gt;this is a test&lt;/p&gt;&lt;/div&gt;"; } } }); </code></pre> <p>And my html looks like this</p> <pre><code>&lt;a class = "els-ajax-popup" href="http://sandbox.somewhere.net/wp-admin/admin-ajax.php?action=els_quiz_ajax&amp;quiz_id=3" &gt;Quiz&lt;/a&gt; </code></pre> <p>Current behavior: After clicking the link, the screen turns dark and the words "Loading ..." appear, centered on the screen for a second and vanish. Then the html appears, directly on the dark background, left-justified and centered vertically. In addition the the missing white background, there is no way to exit. Only a screen refresh will return it to normal.</p> <p>I carefully read all of the stack overflow questions tagged with "Magnific-popup". Not sure what else I can do at this point.</p> <p>Magnific is working great for me in "inline" mode.</p> <pre><code>$('a.open-quiz-popup').magnificPopup({ type:'inline', midClick: true, // allow opening popup on middle mouse click. }); </code></pre> <p>In this case, the HTML and jscript are already in the page. You can see how the inline version works <a href="http://www.effectivechinese.net/effective-chinese-lessons/level-one/" rel="nofollow">here</a>.</p>