open magnificPopup Ajax popUp с jQuery

Question

Я использую всплывающее окно AJAX с magnificPopUp. Я хотел бы открыть это всплывающее окно в событии jQuery click, но я не знаю, как это сделать.

$('.popup').click(function() { 
    var id = $(this).attr('rel'); 
    url = '/test-ajax.php?id=' + id; 
    alert("url" + url); //this shows the URL where the popUp should load 
}) 

"Нормальный" Magnific PopUp класса выглядит так:

$('.simple-ajax-popup-align-top').magnificPopup({ 
    type: 'ajax', 
    alignTop: true, 
    overflowY: 'scroll' 
}); 

Спасибо за любую помощь.

Answer 1

Предположим, что ваш вызов Ajax создает строку HTML, вы можете попробовать что-то вроде этого:

$('.popup').click(function() { 
    var id = $(this).attr('rel'); 
    url = '/test-ajax.php?id=' + id; 

    $.ajax({ 
     type: "POST", 
     url: url, 
     success: function(result) { 
      $('.simple-ajax-popup-align-top').magnificPopup({ 
       alignTop: true, 
       overflowY: 'scroll', 
       items: { 
        src: result, 
        type: 'inline' 
       } 
      }).magnificPopup('open'); 
     }, 
    }); 
}); 

Что делает код по сути является огонь вызов Ajax (документированный here). При обратном вызове ajax-запроса он запускает magnificpopup, вставляет результат (который является строкой HTML, полученной из вызова ajax) в magnificpopup через свойство «items» (задокументировано here и here - см. Раздел прямо над «Открытые свойства»)