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

Posted 2023-05-07

【中文标题】如何让浏览器关闭放大弹出窗口

【英文标题】：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