【问题标题】:Magnific Popup action before close关闭前的 Magnific Popup 动作
【发布时间】:2013-06-21 11:05:01
【问题描述】:

我已经在我的解决方案中实现了 Magnific Popup,我正在使用 Bootbox 来获得用户的确认,即他想要关闭窗口而不保存更改等。

我将自定义函数连接到 close 回调,但它没有按预期工作。

$('#divThumbnails').magnificPopup({
            delegate: 'a',
            type: 'inline',
            midClick: true,
            callbacks: {
                close: function () {
                    var confirm = bootbox.confirm('Are you sure?', function(result) {
                    });

                    if (confirm)
                        return true;
                    else
                        return false;

                }
            }
        });

这只是一个快速示例,而不是生产代码。 if-else 语句在那里,因为否则 Bootbox 对话框无法显示(通常不需要检查返回的值,因为它作为参数传递,在本例中称为 result )。

问题是,在我点击关闭按钮后,我的图片(即弹出窗口的内容)消失了。我想有机会取消关闭操作并实现我需要一个在关闭弹出窗口之前触发的事件。

这可以通过 Magnific Popup 实现吗?

【问题讨论】:

    标签: javascript popup magnific-popup


    【解决方案1】:
      // this part overrides "close" method in MagnificPopup object
      $.magnificPopup.instance.close = function () {
    
          if (!confirm("Are you sure?")) {
              return;
          }
    
           // "proto" variable holds MagnificPopup class prototype
           // The above change that we did to instance is not applied to the prototype, 
           // which allows us to call parent method:
           $.magnificPopup.proto.close.call(this);
      }; 
    

    http://codepen.io/dimsemenov/pen/edCgo

    【讨论】:

    • 谢谢你的回复,我休息一下:)
    • 你好,我已经发布了一个关于你的华丽弹出窗口的问题,希望你能帮助stackoverflow.com/questions/26272970/…
    • 这也适用于在 close.call 行之后放置操作,在我的情况下刷新页面容器
    【解决方案2】:

    此代码仅覆盖当前打开的弹出窗口!如果关闭后打开同一个弹窗,这个回调就消失了!

    $.magnificPopup.instance.st.callbacks.close=function(){ 
    
      // your code here
    
      // this actually close popup
      $.magnificPopup.proto.close.call(this);
    
    };
    

    【讨论】:

      猜你喜欢
      • 2013-06-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多