打開magnificPopup Ajax彈出與jQuery

Question

我使用AJAX彈出與magnificPopUp。我想在jQuery點擊事件中打開這個彈出窗口，但我現在不知道如何去做。

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

「正常」 蕩氣迴腸彈出類看起來如此：

$('.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，通過「items」屬性（記錄爲here和here - 請參閱上面的「公共屬性」部分）將結果（這是從ajax調用獲得的HTML字符串）插入magnificpopup中。