Question

我在一个网站上工作，该网站上有一个产品信息弹出窗口。弹出窗口内部是一个链接，可打开第二个弹出信息。

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

这可能吗？

这是我到目前为止所尝试的（没有运气）..

// 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类的链接。但是，我们似乎无法使用新内容更新或替换弹出内容。

任何人都可以帮助阐明我在这里做错了吗？

Answer 1

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

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

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

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

如何用新的ajax内容替换magnificPopup（ajax）内容

1 个答案: