Question

我有一个完美的灯箱（Colorbox），但有一个问题。

如果我按下平板电脑上的硬件后退按钮，我希望灯箱退出。硬件后退按钮不会关闭灯箱，而是退出整个网站并返回历史记录 - 这不是用户期望的。

所以我想要后退按钮来关闭我的灯箱 $.colorbox.close();没有回到历史。我只想修改灯箱打开时的后退按钮行为。

如果有任何不同，灯箱会以转义键关闭。

为了清楚起见，我没有构建Android应用程序。这是一个在jQuery灯箱中打开图像的网站。如果我的解决方案需要“jQuery Mobile”，请注明。

以下是灯箱http://www.jacklmoore.com/colorbox/

的链接

感谢Radek Pech的解决方案，它正在运行，我也不需要jQuery Mobile。如果您好奇http://ProductInterest.com，只需点按其中一个缩略图，就可以在这里试用灯箱。

Answer 1

打开灯箱时，必须添加新的历史记录状态。

然后你可以观看popstate事件结束灯箱。

history.pushState(null, "Colorbox", '#colorbox');

window.onpopstate = function(event) {
    $.colorbox.close();
};

Answer 2

延伸Radek Pech的答案：

我们需要稍微调整一下才能更好地使用Colorbox。首先，我们需要保留URI和查询字符串。其次，我们不仅需要$.colorbox.close();中的onLoad函数，还需要history.replaceState中的onClosed函数，以便正常关闭（esc，叠加点击， etc）根据需要处理URL。我们还可以调整状态的名称以包含document.title。

所以这就是那些colorbox初始状态看起来如何：

$('.colorbox').colorbox({
    onLoad: function() {
        history.pushState(null, document.title + ' [colorbox-active]', window.location.pathname + window.location.search + '#colorbox-active');
        window.onpopstate = function(event) {
            $.colorbox.close();
        };
    },
    onClosed: function() {
        history.replaceState(null, document.title, window.location.pathname + window.location.search);
    }
});

我想要我的平板电脑的硬件后退按钮（Android）关闭我的网站的灯箱

2 个答案: