Magnific Popup - inline popups loaded via ajax window not showing

Question

Magnific Popup - inline popups loaded via ajax window not showing

I have one page that loads as a Magnific popup (registration page) via AJAX:

    $(document).on('click', '.popup-modal', function (e) {
        e.preventDefault();

        $.magnificPopup.open({
            items: {
                src: $(this).attr("href")
            },
            type: 'ajax',
            ajax: {
                settings: {cache:false, dataType: "html" }, // Ajax settings object that will extend default one - http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
                cursor: 'mfp-ajax-cur', // CSS class that will be added to body during the loading (adds "progress" cursor)
                tError: '<a href="%url%">The content</a> could not be loaded.' //  Error message, can contain %curr% and %total% tags if gallery is enabled
            }
        });

    });

This window has two stages of registration inside (for each of them there is a separate inline popup div):

<div id="test-modal-11" class="white-popup-block-big" style="text-align:center;">
    <div class="proj_registration_window">
        <h1>Sign Up</h1>
        <br>

        <a href="<?php echo $adapters['vk']->getAuthUrl(); ?>" class="proj_nob"><img src="<?php bloginfo('template_directory'); ?>/bitrix/templates/template_copy/assets/images/button_vk.png"></a>
        <a href="<?php echo $adapters['facebook']->getAuthUrl(); ?>" class="proj_nob"><img src="<?php bloginfo('template_directory'); ?>/bitrix/templates/template_copy/assets/images/button_fb.png"></a>
        <a class="proj_last" href="<?php echo $adapters['odnoklassniki']->getAuthUrl(); ?>" class="proj_nob"><img src="<?php bloginfo('template_directory'); ?>/bitrix/templates/template_copy/assets/images/button_odn.png" class="proj_last"></a>

        <div style="padding-top:30px; padding-bottom:30px;" class="proj_small_txt proj_grey_txt">We won't share material under your name on social networks</div>

        <div style="border-bottom:1px solid #d7d7d7;"></div>
        <div style="width:190px; background-color:#FFF; margin:0px auto; margin-top:-8px; text-align:center; font-size:13px;">Or register via E-mail</div>

        <br>
        <br>
        <form data-validate="true" id="reg_form" method="POST">
            <input type="text" id="form_username" value="" placeholder="  ">
            <input type="email" id="form_useremail" data-rule-required="true" data-rule-email="true" value="" placeholder="e-mail">
            <input type="password" data-rule-required="true" data-rule-password="true" id="form_userpwd" value="" placeholder="">
        </form>

        <div style="width:360px; margin:0px auto">
            <div style="width:308px; display:inline-block; margin:0px auto; font-size:13px;"><a class="popup proj_allgreen" id="reg_form_trigger" href="#test-modal-12">Sign Up</a></div>
            <br>
            <br>
            <br>
            <span class="proj_grey_txt">I agree with user agreements</span>
            <br>
            <br>
        </div>
    </div>
</div>

<div id="test-modal-12" class="white-popup-block-big mfp-hide" style="text-align:center;">
    <div class="proj_registration_window">
        <h1>Are you professional?</h1>

        <br>

        <div style="float:left; display:inline-block;">
            <a id="form_submit2" class="proj_allgreen popup-modal" href="#end">Yes</a>
        </div>

        <div style="float:left; display:inline-block; text-align:center; width:45px; font-size:13px; padding-top:12px;">
            Or
        </div>

        <div style="float:left; display:inline-block;">
            <a id="form_submit" class="proj_green_border popup-modal" href="#end">No, complete my registration</a>
        </div>

        <div style="clear:both">

        </div>

        <div style="padding-top:30px; padding-bottom:30px;" class="proj_small_txt proj_grey_txt">
            <img src="<?php bloginfo('template_directory'); ?>/bitrix/templates/template_copy/assets/images/player.png" class="proj_last">
        </div>

    </div>
    <button title="Close (Esc)" type="button" class="mfp-close">
        ×
    </button>
</div>

I am trying to hide one window and show another and I don't know how to do it right. I tried to make them inline, but it doesn't work, the window with id "test-page-12" just doesn't appear when clicking the "Register" link on the first page. I tried to solve this with jQuery:

$('.popup').magnificPopup({
    items: {
        src: $(this).next('#test-modal-12'),
        type:'inline'
    },
    midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
});