Magnific Popup关闭前的操作

6

我在我的解决方案中实现了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实现这一点?
2个回答

21
  // 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


谢谢您的回复,我不再多说 :) - Tobiasz
嗨,我在关于你的magnific Popup的问题上发布了一个问题,希望你能帮忙。http://stackoverflow.com/questions/26272970/image-gallery-with-multiple-title-on-right-side - Learning
这也适用于在close.call行之后放置操作,例如在我的情况下刷新页面容器。 - Kiwizoom

0

这段代码仅覆盖当前打开的弹出窗口!如果您在关闭后重新打开相同的弹出窗口,则此回调将消失!

$.magnificPopup.instance.st.callbacks.close=function(){ 

  // your code here

  // this actually close popup
  $.magnificPopup.proto.close.call(this);

};

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接