Question

任何人都可以告诉我如何使用magnific-popup jquery插件（使用ajax）在弹出窗口中打开弹出窗口。

$('.ajax-popup-link').magnificPopup({
  type: 'ajax'
});
<a href="path-to-file.html" class="ajax-popup-link"> Link 1 </a>

“path-to-file.html”

<a href="path-to-other-file.html" class="ajax-popup-link"> next popup </a>

谢谢

Answer 1

您不能同时打开两个窗口。但是当第二次调用时弹出窗口的内容会被替换，例如 - http://codepen.io/dimsemenov/pen/hwIng

Answer 2

我知道这是一个旧帖子，但对于任何有兴趣的人来说，这对我有用：

$(document).on('click', '.sAjax', function(e){

        $.magnificPopup.close(); // Close existing popup

        // Open new popup
        $.magnificPopup.open({
          items: {
                src: 'new-page.html',
                type: 'ajax'
          }
        });

        e.preventDefault();

});

请勿忘记为您的链接提供.sAjax

的新课程

Answer 3

只要您在页面中有通过ajax提取的下一个和上一个链接，就可以这样做。

这对我有用：

$('.js-pack').magnificPopup({
    delegate: '.js-mfp-ajax',
    type: 'ajax',
    closeOnBgClick: false,
    mainClass: 'mfp-fade',
    removalDelay: 300,
    overflowY: 'scroll',
    gallery: {
        enabled: true
    },
    callbacks: {
        ajaxContentAdded: function() {
            $('.prev-next .next-link').click(function(event){ event.preventDefault(); $.magnificPopup.next(); });
            $('.prev-next .prev-link').click(function(event){ event.preventDefault(); $.magnificPopup.prev();  });
        }
    }
});

要添加的关键部分是gallery: enabled和callbacks参数。

我的next-prev按钮的HTML非常简单：

<div class="prev-next">
    <a class="btn  prev-link" href="http://prev-url" rel="prev">« Previous</a>
    <a class="btn  next-link" href="http://next-url" rel="next">Next »</a>
</div>

Answer 4

你可以通过制作一个简单的ajax请求来实现：

$('a.your-link').on('click',function(e){
    e.preventDefault();
    $.ajax({
        type: "GET", // or POST
        url: 'url_to_php_page.php',
        data: {
            get_request_id : $(this).data('id'), // assign a data-id to the link
        },                                      
        success: function(data){
            $.magnificPopup.open({
                type: 'inline',
                closeOnContentClick: false,
                items: {
                    src: data
                }
            })
        }
    });
});

然后在服务器端，您使用get_request_id或$_GET['get_request_id']检索$_POST['get_request_id']。

如何在popup插件中打开弹出窗口中的弹出窗口

4 个答案: