Question

我正在尝试调用本地网页来加载magnificpopup叠加层，但它只在第二次点击时才会加载。

在我的网络标签中，我可以看到它正在请求该页面，但它不会触发叠加层并加载到该html中，直到第二次点击。

我是JS的大三学生，所以我不确定我需要做什么，所以任何指针都会受到赞赏！

Component.prototype = {

    init: function () {
        var that = this;

        this.$element.on('click tap',function(e){
            e.preventDefault();
            that._galleryId = that.$element.attr('href'); //get the url from the link we've just clicked
            that._initialiseGallery(that);

        });

    },
    _onGalleryOpen: function(that){
        console.log('test5');
        if(that.options.fullScreenType === 'image'){
            $(window).trigger('resize');
        }
    },

    _initialiseGallery: function(that) {

        that.$element.magnificPopup({
          items: {
            src: that._galleryId
          },
          type: 'ajax',

            callbacks: {
                open: function() {
                    that._onGalleryOpen(that);
                },
                close: function() {
                  // Will fire when popup is closed
                },
              parseAjax: function(mfpResponse) {
                // mfpResponse.data is a "data" object from ajax "success" callback
                // for simple HTML file, it will be just String
                // You may modify it to change contents of the popup
                // For example, to show just #some-element:
                mfpResponse.data = $(mfpResponse.data).find('.Gallery');

              },
              ajaxContentAdded: function() {
                // Ajax content is loaded and appended to DOM
              }
            }
        });
    }
}

Answer 1

如此改变：

that.$element.magnificPopup({

为：

$.magnificPopup.open({...});

工作！

我在这里找到了解决方案：Magnific-popup fails to open from button inside Google Maps infoBox

magnificpopup仅在调用内联ajax时第二次单击时工作

1 个答案: