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

我有这个完美的灯箱（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函数，也是onClosed的history.replaceState ，以便正常关闭（esc，overlay click等）根据需要处理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); } });