Question

我有弹出窗口，但有时用户点击浏览器上的后退按钮关闭弹出窗口。

如何让浏览器后退按钮关闭一个“popific-popup”＆＃39;已经开放了？

由于

Answer 1

经过一番挖掘后发现了history.js，然后是以下

var magnificPopup = null;
jQuery(document).ready(function ($) {
    var $img = $(".img-link");
    if ($img.length) {
        $img.magnificPopup({
            type: 'image',
            preloader: true,
            closeOnContentClick: true,
            enableEscapeKey: false,
            showCloseBtn: true,
            removalDelay: 100,
            mainClass: 'mfp-fade',
            tClose: '',
            callbacks: {
                open: function () {
                    History.Adapter.bind(window, 'statechange', closePopup);
                    History.pushState({ url: document.location.href }, document.title, "?large");
                    $(window).on('resize', closePopup);
                    magnificPopup = this;
                },
                close: function () {
                    $(window).unbind('statechange', closePopup)
                        .off('resize', closePopup);
                    var State = History.getState();
                    History.replaceState(null, document.title, State.data["url"]);
                    magnificPopup = null;
                }
            }
        });
    }
});

function closePopup () {
    if (magnificPopup != null)
        magnificPopup.close();
}

Answer 2

我正在使用这个解决方案：

callbacks: {   
        open: function() {
          location.href = location.href.split('#')[0] + "#gal";
        }
        ,close: function() {
          if (location.hash) history.go(-1);
        }
      }

这段代码：

$(window).on('hashchange',function() {

       if(location.href.indexOf("#gal")<0) {

         $.magnificPopup.close(); 
       }
  });

所以，在gallery open上我添加#gal hash。当用户关闭时，我几乎单击后退按钮将其删除。如果用户点击后退按钮 - 一切正常。

此解决方案不会破坏按钮行为，也不需要任何其他插件。

欢迎提出意见。

Answer 3

为了补充你的答案，这些是我为我工作的有意义的路线。

      callbacks:
        open: ->
          History.pushState({ url: document.location.href }, null, "?dialogOpen")
          History.Adapter.bind(window, 'statechange', attemptToCloseDialog)
        close: ->
          $(window).unbind('statechange', attemptToCloseDialog)
          History.replaceState(null, null, History.getState().data['url'])

尝试：

attemptToCloseDialog = ->
  $.magnificPopup.close() if $.magnificPopup.instance

如何使浏览器恢复关闭magnific-popup

3 个答案: