how to open popup within popup in magnific popup plugin

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

Answers:

Answer

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

Answer

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

Answer

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.