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/

在另一个函数中调用magnificPopUp

1 个答案: