在另一個函數中調用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/