how to open popup within popup in magnific popup plugin

Question

can anybody tell me how to open popup within popup using magnific-popup jquery plugin (using 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"

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

Thanks

score 5 · Accepted Answer · answered Feb 21 '14 at 10:38

5

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

answered Feb 21 '14 at 10:38

Dmitry Semenov

4,566
2
36
39

2

hi , its inline content , i want it with ajax ! – Yogesh Saroya Feb 21 '14 at 10:44
How would you do this to infinitely chain popups dynamically to navigate posts for example @DmitrySemenov – josethernandezc Feb 26 '14 at 14:04
2

This does not work with ajax as it only replaces the content and not options etc. Is this actually possible? Seems limiting if not. – Paul Oct 12 '14 at 18:47
Just want to share my problems/research choosing which popup plugin to choose for multiple modal; 1. Magnific don't support multiple popup opened https://github.com/dimsemenov/Magnific-Popup/issues/36 2. Out of the box Telerik Kendo Window can do multiple popup, but the content below is scrollable, so not good for small screen. 3. Out of the box, Bootstrap modal can do multiple popup and stop the content below from scrolling. works fine when the content is short; when the content need to be scrolled, there is issue, but there are fixes: https://github.com/nakupanda/bootstrap3-dialog/issues/70 – kite Nov 04 '20 at 07:23

score 3 · Answer 2 · answered Jul 03 '17 at 20:37

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

score 1 · Answer 3 · answered Oct 21 '15 at 15:34

This is possible as long as you have next and previous links within the page that you are pulling in via 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.

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

<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>

score 1 · Answer 4 · answered Mar 08 '16 at 19:56

You can do it by making a simple ajax request:

$('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'].

how to open popup within popup in magnific popup plugin

4 Answers4

Linked