我有这个完美的灯箱(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