Как открыть всплывающее окно в всплывающем окне в magnific popup plugin

Question

Может ли кто-нибудь сказать мне, как открыть всплывающее окно в всплывающем окне, используя плагин jQuery с использованием magnific-popup (с использованием ajax).

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

на "путь-к-file.html"

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

Благодарности

Answer 1

Вы не можете иметь два окна открыты одновременно. Но содержимое всплывающего окна заменяется, когда вызывается второй раз, вот пример - http://codepen.io/dimsemenov/pen/hwIng

Answer 2

Это возможно, если у вас есть следующая и предыдущая ссылки на странице, которую вы втягиваете через ajax.

Это работает для меня:

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

Они ключевые части добавляемых gallery: enabled и callbacks параметры.

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> 

Answer 3

Вы можете сделать это, сделав простой запрос 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 
       } 
      }) 
     } 
    }); 
}); 

Затем на стороне сервера вы извлекаете get_request_id с $_GET['get_request_id'] или $_POST['get_request_id'].

Answer 4

Я знаю, что это старый нить, но для тех, кто еще заинтересован, это работает для меня:

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

}); 

Не забудьте дать свою ссылку новый класс .sAjax