我希望平板电脑的硬件后退按钮 (Android) 关闭网站的灯箱

Question

我有这个灯箱（Colorbox）可以完美地工作，但有一个问题。

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

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

如果有任何差异，灯箱将使用转义键关闭。

需要明确的是，我不是在构建Android应用程序。这是一个网站，其中包含在jQuery灯箱中打开的图像。如果我需要"jQuery Mobile"为您的解决方案，请指定。

这是灯箱 http://www.jacklmoore.com/colorbox/的链接

多亏了Radek Pech的解决方案，它就可以工作了，我也不需要jQuery Mobile。如果您好奇 http://ProductInterest.com 只需点击其中一个缩略图，可以在此处试用灯箱。

Answer 1

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

然后，您可以观察弹出状态事件结束关闭灯箱。

history.pushState(null, "Colorbox", '#colorbox');
window.onpopstate = function(event) {
    $.colorbox.close();
};

Answer 2

扩展Radek Pech的答案：

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

所以这就是这些颜色框初始化状态的外观：

$('.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);
    }
});