如何用新的 ajax 内容替换 magnificPopup (ajax) 内容答案

【问题标题】：How to replace magnificPopup (ajax) content with new ajax content如何用新的 ajax 内容替换 magnificPopup (ajax) 内容
【发布时间】：2016-04-18 04:58:27
【问题描述】：

我在一个有产品信息弹出窗口的网站上工作。弹出窗口内是一个链接，可打开第二个弹出窗口以显示运输信息。

我们想要的是在点击第二个链接时替换弹出内容。

这可能吗？

这是我迄今为止一直在尝试的（运气不好）..

// first popup
$('.pop-ajax').magnificPopup({
        type: 'ajax',
        closeBtnInside: true, // put close button on inside

        callbacks: {
            parseAjax: function(mfpResponse) {
                mfpResponse.data = $(mfpResponse.data).find('.l-main');
            },
            ajaxContentAdded: function() {
                // console.log('it works');
            }
        }
});

// Second popup (loads first popup when a link inside is clicked)
$('.pop-product').magnificPopup({
    type: 'ajax',
    closeBtnInside: true, // put close button on inside

    callbacks: {
        parseAjax: function(mfpResponse) {
            mfpResponse.data = $(mfpResponse.data).find('#product-ajax');
        },
        ajaxContentAdded: function() {
            console.log('First popup');
            // var mfp = $.magnificPopup.instance;
            //     mfpContentContainer = mfp.contentContainer;
            //     mfpContent = mfp.content;


            $('.pop-ajax').click(function(){
                $('.pop-product').magnificPopup('close');
                $('.pop-ajax').magnificPopup({
                    type: 'ajax',
                    closeBtnInside: true, // put close button on inside

                    callbacks: {
                        parseAjax: function(mfpResponse) {
                            mfpResponse.data = $(mfpResponse.data).find('.l-main');
                        },
                        ajaxContentAdded: function() {
                            // console.log('it works');
                        }
                    }
                });
            });
        }
    }
});

第二个弹出窗口是网站上的一个大型内容区域。该区域内的一个链接与.pop-ajax 类有一个链接。但是，我们似乎无法用新内容更新或替换弹出内容。

谁能帮助阐明我在这里做错了什么？

【问题讨论】：

标签： javascript magnific-popup

【解决方案1】：

您是否尝试根据以下链接创建嵌套弹出窗口，这是不允许的。 Issues for Simultaneous Popups

但是如果你只想打开一个弹窗，在里面点击内部链接后，只需替换弹窗的内容即可。然后参考以下链接。 Nested Popups

$('.first-popup-link, .second-popup-link').magnificPopup({  closeBtnInside:true});

在上面的代码中，您可以发现为两个不同的链接创建了相同的 magnificPopup 实例。

【讨论】：