在另一个函数中调用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/