如何在放大镜弹出窗口插件中打开弹出窗口

can anybody tell me how to open popup within popup using magnific-popup jquery plugin (using ajax).

有人能告诉我如何使用大屏幕弹出式jquery插件(使用ajax)在弹出式中打开弹出式吗?

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

on "path-to-file.html"

“path-to-file.html”

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

Thanks

谢谢

4 个解决方案

#1

You can't have two windows open at once. But the content of popup is replaced when is called second time, here is example - http://codepen.io/dimsemenov/pen/hwIng

你不可能同时打开两个窗口。但是在第二次调用时，弹出窗口的内容被替换，这里有一个例子——http://codepen.io/dimsemenov/pen/hwIng

#2

I know this an old thread, but for anyone still interested, this worked for me:

我知道这是一条古老的线索，但对于任何仍然感兴趣的人来说，这条线索对我很有用:

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

});

Don't forget to give your link the new class of .sAjax

别忘了给你的链接添加新类。sajax。

#3

This is possible as long as you have next and previous links within the page that you are pulling in via ajax.

这是可能的，只要您在页面中有通过ajax导入的下一个和上一个链接。

This worked for me:

这工作对我来说:

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

They key parts to add are gallery: enabled and the callbacks parameters.

它们的关键部分是gallery: enabled和回调参数。

The HTML of my next-prev buttons is pretty simple:

我的下一个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>

#4

You can do it by making a simple ajax request:

您可以通过发出一个简单的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
                }
            })
        }
    });
});

Then on server side you retrieve the get_request_id with $_GET['get_request_id'] or $_POST['get_request_id'].

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

#1