代码之家 › 专栏 › 技术社区 › TamerM

在弹出加载时从放大弹出的调用按钮访问属性

magnific-popup jquery javascript

TamerM · 技术社区 · 6 年前

我有一个页面,有几个按钮,都使用放大弹出式打开相同的模式。但是我需要根据调用按钮的数据属性为每个按钮定制弹出窗口。

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

放大弹出式初始化是FE的JS文件的一部分,我在模块的JS文件中工作。所以我要尽量减少对FE的JS的更改!

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

1 回复 | 直到 6 年前

TamerM 6 年前

检查以下更新:

我就是这么做的:

没有接触到初始化任何FE的JS .my-modal 班
我编辑了这些按钮的类 .我的模态 进入之内 .my-custom-modal (例如)

已在上初始化MagnicPopup .我的自定义模式 并添加以下内容以在打开模式之前触发事件:

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

更新上面的方法有效,但是'this'变量没有返回实际的按钮,但看起来像是页面中的第一个按钮。以下各项应正常工作:

$('.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);
            }
          }
});

推荐文章