如何让浏览器关闭放大弹出窗口答案

【问题标题】：how to make browser back close magnific-popup如何让浏览器关闭放大弹出窗口
【发布时间】：2014-04-09 09:30:22
【问题描述】：

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

如何让浏览器后退按钮关闭已经打开的“放大弹出窗口”？

谢谢

【问题讨论】：

【解决方案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();
}

【讨论】：

【解决方案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(); 
       }
  });

所以，在画廊打开时，我添加了#gal hash。当用户关闭时，我实际上单击后退按钮将其删除。如果用户点击后退按钮 - 一切正常。

此解决方案不会中断返回按钮的行为，也不需要任何额外的插件。

欢迎评论。

【讨论】：

【解决方案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

【讨论】：