Magnific Popup - 通过ajax窗口下载的内联弹出窗口不弹出

Question

我有一个页面通过AJAX下载为Magnific弹出窗口（注册页面）：

    $(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
            }
        });

    });

此窗口内有两个注册步骤（对于每个步骤 - 单独的内联弹出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>

我试图隐藏一个窗口并显示另一个窗口，我不知道如何以正确的方式完成它。我试图让它们内联但它不起作用，在第一页上单击“注册”链接时，没有显示带有“test-page-12”id的窗口。 我尝试使用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.
});

它也不起作用。

你能帮我实现通过AJAX下载更改页面的正确方法吗？