在 Popup 加载时从 Magnific Popup 的调用按钮访问属性

Question

我有一个包含多个按钮的页面，这些按钮都使用 Magnific Popup 打开相同的模式。但是我需要根据调用按钮的数据属性为每个按钮自定义弹出窗口。

所以我需要一种在弹出窗口弹出时调用函数的方法 :-) 并且可以访问调用按钮。

Magnific 弹出窗口初始化是 FE 的 js 文件的一部分，我正在模块的 js 文件中工作。所以我尽量减少对FE的js的改动！

这可能吗？我怎样才能做到这一点？

Answer 1

检查以下更新：

这是我所做的：

没有触及初始化任何.my-modalclass
我将这些按钮的 classes 从 .my-modal 编辑为 .my-custom-modal（例如）

在 .my-custom-modal 上初始化了 magnificpopup 并添加了以下内容以在打开模式之前触发事件：

$('.my-custom-modal').magnificPopup({
    type: 'inline',
    midClick: true
}).on('mfpBeforeOpen', function () {
    // 'this' is the current button that triggered the modal
    console.log(this);
});

更新以上有效，但 'this' var 没有返回实际按钮，但看起来像是页面中的第一个按钮。以下应该可以正常工作：

$('.my-custom-modal').magnificPopup({
type: 'inline',
midClick: true,
callbacks: {
            open: function () {
                var mp = $.magnificPopup.instance,
                    btn = $(mp.currItem.el[0]);

                //btn is the actual button being clicked
                console.log(btn);
            }
          }
});

在 Popup 加载时从 Magnific Popup 的调用按钮访问属性

Accessing attributes from Magnific Popup's calling button on Popup load

javascript

jquery

magnific-popup