在另一個函數內調用magnificPopUp

Question

我想在另一個函數onclick事件中顯示一個大的彈出窗口。這個函數有一個條件語句，如果爲false，那麼應該顯示彈出窗口。

我創建了一個的jsfiddle這說明什麼，我試圖做的：http://jsfiddle.net/Lilu/heM4q/

HTML：

<button class="add-wishlist"><span>Wishlist</span></button> 

的Jquery：

$(document).on('click', '.add-wishlist', function(e) { 
    var yes = "1"; 

    if (yes == "2"){ 
     // Add to wishlist 
    }else { 
     // Display error in popup 
     $.magnificPopup.open({ 
      type: 'ajax', 
        alignTop: true, 
        mainClass: 'my-mfp-zoom-in', 
        removalDelay: 160, 
        callbacks: { 
         parseAjax: function(mfpResponse) { 
          mfpResponse.data = "<div class='modal-content'>"+"Sorry you cannot do that"+"</div>"; 
         }, 
         ajaxContentAdded: function() { 
          return this.content; 
         } 
        } 
     }); 

    } 

}); 

任何幫助將大大讚賞。

Answer 1

我發現我可以實現使用內聯宏觀彈出而不是ajax的彈出窗口。

HTML：

<button class="add-wishlist"><span>Wishlist</span></button> 

JQuery的：

$(document).on('click', '.add-wishlist', function(e) { 
    var yes = "1"; 

    if (yes == "2"){ 
     // Add to wishlist 
    }else { 
     // Display error in popup 
     displayError(); 

    } 

}); 

function displayError() { 
     $.magnificPopup.open({ 
       items: { 
        src: '<div class="modal-content">' 
          +'<p class="error">' 
          +'<strong>Whoops!</strong></p>' 
          +'<p>You cannot do that.</p></div>', 

        type:'inline', 
       }, 
       closeBtnInside: true 
     }); 
} 

請參閱：http://jsfiddle.net/Lilu/heM4q/4/