Comment ouvrir un popup dans popup dans un plugin popup magnifique

Vous ne pouvez pas avoir deux fenêtres ouvertes à la fois. Mais le contenu de popup est remplacé lorsqu'il est appelé deuxième fois, voici un exemple – http://codepen.io/dimsemenov/pen/hwIng

Cela est possible tant que vous avez les liens suivants et précédents dans la page que vous tirez via ajax.

Cela a fonctionné pour moi:

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

Les éléments clés à ajouter sont la gallery: enabled et les paramètres de callbacks .

Le HTML de mes boutons next-prev est assez 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> 

Vous pouvez le faire en faisant une demande simple d'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 } }) } }); }); 

Ensuite, sur le côté serveur, vous récupérez get_request_id avec $_GET['get_request_id'] ou $_POST['get_request_id'] .

Je sais que c'est un vieux fil, mais pour ceux qui sont encore intéressés, cela a fonctionné pour moi:

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

N'oubliez pas de donner votre lien à la nouvelle classe de .sAjax