1

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

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 是从 data 属性中读取的。

提前致谢。

4

5 回答 5

7 
$('.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'
        }
    }
});
于 2013-08-14T05:53:48.683 回答
3

这是如何做到的：

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();
}
于 2013-09-06T14:42:04.083 回答
1

由于这个答案是关于将数据插入 Magnific 的 ajax 调用的原始问题，所以我将在此处发布。经过几个小时的尝试解决这个问题，您应该知道，如果您使用的画廊能够在画廊项目之间移动而不关闭弹出窗口，elementParse那么当您在查看后访问项目时，使用设置 AJAX 数据将失败它（当弹出窗口仍然打开时）。

这是因为elementParse它包含在一个检查中，它可以检测一个项目是否已经被“解析”。这里有一个关于发生了什么的小解释：

  • 在项目索引 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;

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

于 2015-11-21T04:24:51.857 回答
0

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

于 2013-05-31T06:05:10.337 回答
-2 
postId = $(this).attr('data-id')

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

于 2013-05-31T06:16:25.567 回答