How to display quiz using Magnific-popup with ajax

Question

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.

I reduced the jQuery code to be the minimum necessary to duplicate the issue:

$('.els-ajax-popup').magnificPopup({ 
    type:'ajax',
    callbacks: {
        parseAjax: function (ajaxResponse) { 
            ajaxResponse.data = "<div class='wrapper'><p>this is a test</p></div>";
        }
    }
});

And my html looks like this

<a class = "els-ajax-popup" href="http://sandbox.somewhere.net/wp-admin/admin-ajax.php?action=els_quiz_ajax&quiz_id=3" >Quiz</a>

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.

I carefully read all of the stack overflow questions tagged with "Magnific-popup". Not sure what else I can do at this point.

Magnific is working great for me in "inline" mode.

$('a.open-quiz-popup').magnificPopup({ 
    type:'inline',
    midClick: true, // allow opening popup on middle mouse click.
});

In this case, the HTML and jscript are already in the page. You can see how the inline version works here.

Answer 1

I'm using MagnificPopup in the same way and it should work, looks to me like your problem is related to the CSS.

Looking at your page, maybe try this:

ajaxResponse.data = "<div id='test-popup4' class='quiz-popup'>" +
      "<div class='wrapper'><p>this is a test</p></div>" +
      "<button class='mfp-close' type='button' title='Close (Esc)'>×</button>" +
      "</div>";

That should load the content applying the same styles you currently have.

Hope this helps.