Question

对于Magnific Popup的实现，我需要将post id传递给ajax设置。 post id存储在Magnific Popup绑定的元素的data属性中。我希望这可以工作：

html元素：

<a data-id="412">Clicke me</a>

使用Javascript：

$('.element a').magnificPopup({
  type: 'ajax',
  ajax: {
    settings: {
      url: php_array.admin_ajax,
      type: 'POST',
      data: ({
        action:'theme_post_example',
        id: postId
      })
    }
  }

});

从数据属性中读取postId。

提前致谢。

Answer 1

$('.element a').magnificPopup({
    callbacks: {
        elementParse: function(item){
            postData = {
                action  :'theme_post_example',
                id      : $(item.el[0]).attr('data-id')     
            }
            var mp = $.magnificPopup.instance;
            mp.st.ajax.settings.data = postData;
        }
    },
    type: 'ajax',
    ajax: {
        settings: {
            url: php_array.admin_ajax,
            type: 'POST'
        }
    }
});

Answer 2

以下是如何操作：

<强> HTML：

<a class="modal" data-id="412" data-action="theme_post_example">Click me</a>

<强> jquery的：

$('a.modal').magnificPopup({
    type: 'ajax',
    ajax: {
        settings: {
            url      : php_array.admin_ajax,
            dataType : 'json'
        }
    },
    callbacks: {
        elementParse: function() {
            this.st.ajax.settings.data = {
                action : this.st.el.attr('data-action'),
                id     : this.st.el.attr('data-id')
            }
        }
    },
    parseAjax: function( response )
    {
        response.data = response.data.html;
    }
});

<强> PHP

function theme_post_example()
{
    $id = isset( $_GET['id'] ) ? $_GET['id'] : false;

    $html = '<div class="white-popup mfp-with-anim">';

    /**
     * generate your $html code here ...
     */

    $html .= '</div>';

    echo json_encode( array( "html" => $html ) );

    die();
}

Answer 3

由于这个答案是关于将数据插入Magnific的ajax电话的原始问题，我将在此处发布。经过几个小时的尝试来解决这个问题，您应该知道如果您正在使用能够在不关闭弹出窗口的情况下在图库项之间移动的图库，请使用elementParse设置您的AJAX数据在您查看项目后访问该项目时会失败（当弹出窗口仍处于打开状态时）。

这是因为elementParse包含在一张支票中，它会检测某件商品是否已被解析过＃39}。以下是对发生的事情的一个小解释：

在商品索引2处打开图库。
尚未解析项目，因此它将解析后的标志设置为true并运行elementParse回调（按此顺序）。你的回调设置了ajax选项来获取这个项目的数据，一切都很好。
将（右）移动到项目索引3。
同上。该项尚未解析，因此它运行回调。您的回调设置数据。它有效。
将（左）移回项目索引2.
这次解析了该项目。由于潜在的性能原因，它会跳过重新解析项目的元素。您的回调未执行。 Magnific的ajax数据设置将保持与项目索引3相同。
- 使用旧设置执行AJAX调用，它返回项目索引3的数据，然后呈现给用户。 Magnific会相信它在索引2上，但它正在渲染索引3的数据。

要解决此问题，您需要挂钩一个始终在ajax调用之前执行的回调，例如beforeChange。

主要区别在于当前项目没有传递到回调中。幸运的是，在这一点上，magnific已经更新了指向正确索引的指针。您需要使用以下方法获取当前项目的元素：

var data = {}; // Your key-value data object for jQuery's $.ajax call.

// For non-closures, you can reference mfp's instance using
// $.magnificPopup.instance instead of 'this'.
// e.g.
// var mfp = $.magnificPopup.instance;
// var itemElement = mfp.items[mfp.index].el;
var itemElement = this.items[this.index].el;

// Set the ajax data settings directly.
if(typeof this.st.ajax.settings !== 'object') {
    this.st.ajax.settings = {};
}
this.st.ajax.settings.data = data;

这个答案也可以作为当前最高投票的合适替代品，因为它可以任意方式。

Answer 4

您可以使用open公开方法动态打开弹出窗口http://dimsemenov.com/plugins/magnific-popup/documentation.html#public_methods

Answer 5

postId = $(this).attr('data-id')

$（this）检索当前元素（您单击的链接），并查看指定属性的值。

将clicked元素的data-attribute值传递给ajax设置

5 个答案: