我有这个完美的灯箱（Colorbox），但有一个问题。
如果我按下平板电脑上的硬件后退按钮，我希望灯箱退出。 硬件后退按钮不是关闭灯箱，而是退出整个网站并返回历史记录 – 这不是用户期望的。
所以我想要后退按钮来关闭我的灯箱$.colorbox.close(); 没有回到历史。 我只想修改灯箱打开时的后退按钮行为。
如果它有任何区别，灯箱将使用转义键关闭。
为了清楚起见，我没有构建Android应用程序。 这是一个在jQuery灯箱中打开图像的网站。 如果我的解决方案需要“jQuery Mobile”，请注明。
这是灯箱的链接https://www.jacklmoore.com/colorbox/
感谢Radek Pech的解决方案，它正在运行，我也不需要jQuery Mobile。 如果你好奇，可以在这里尝试灯箱https://ProductInterest.com只需点击其中一个缩略图。
打开灯箱时，必须添加新的历史记录状态。
然后你可以观看popstate事件结束灯箱。
history.pushState(null, "Colorbox", '#colorbox'); window.onpopstate = function(event) { $.colorbox.close(); };
为了扩展Radek Pech的答案：
我们需要稍微调整一下才能更好地使用Colorbox。 首先，我们需要保留URI和查询字符串。 其次，我们不仅需要$.colorbox.close(); onLoad函数，也是onClosed的history.replaceState ，以便正常关闭（esc，overlay click等）根据需要处理URL。 我们还可以调整状态的名称以包含document.title。
这就是这些colorbox初始化状态看起来如何：
需要了解更多jQuery教程分享我想要我的平板电脑硬件后退按钮（Android）来关闭我网站的灯箱，都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
$('.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); } });
以上就是jQuery教程分享我想要我的平板电脑硬件后退按钮（Android）来关闭我网站的灯箱相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/jquerytutorial/981235.html