Question

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

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

Magnific弹出窗口初始化是FE的js文件的一部分，而我正在使用模块的js文件。因此，我正在尝试最小化对FE的js的更改！

这可能吗？我该如何实现？

Answer 1

检查以下更新：

这就是我所做的：

没有碰过初始化任何.my-modal类的FE的js
例如，我将这些按钮的类从.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);
            }
          }
});

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

1 个答案: