CODEWITHSUNDEEP
javascriptjquerypopupmagnific-popup
Yogesh Saroya
Yogesh Saroya

Reputation: 1505

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

Upvotes: 5

Views: 20999

Answers (4)

Lee Price
Lee Price

Reputation: 5212

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

Upvotes: 3

Someone33
Someone33

Reputation: 568

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

Upvotes: 1

patrickzdb
patrickzdb

Reputation: 1073

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>

Upvotes: 1

Dmytro Semenov
Dmytro Semenov

Reputation: 4616

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

Upvotes: 5

Related Questions