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

我有这个灯箱（Colorbox），完美的作品，但有一个问题。我想要我的平板电脑的硬件后退按钮（Android）关闭我的网站的灯箱

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

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

如果它有什么区别，灯箱会用退出键关闭。

只是要清楚，我没有构建一个Android应用程序。这是一个图像在jQuery Lightbox中打开的网站。如果我需要“jQuery Mobile”作为您的解决方案，请指定。

这里的链接到收藏夹http://www.jacklmoore.com/colorbox/

由于拉德克·佩赫的解决方案，它的工作，我并不需要jQuery Mobile的要么。如果您好奇http://ProductInterest.com只需点击其中一个缩略图，就可以试试这里的灯箱。

来源

2015-01-21 PJ Brunet

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

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

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

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

来源

2015-01-21 09:21:53

仅供参考，做这种方式会导致意想不到的结果，如果你开始使用pushState的/ popstate超过一两件事。 – 2015-01-21 09:28:28

工程就像一个魅力，你很棒！刚刚在我的Galaxy Tab 4上进行了测试.FWIW在没有使用jQuery Mobile的情况下工作。和@NathanMacInnes很好知道。但至少现在我只需要这个灯箱。 – 2015-01-21 09:31:26

是的，这只是一个非常简单的版本。正确的你应该注意history.state并采取适当的行动。 – 2015-01-21 09:32:24

要拉狄克佩赫了办法延长：

我们需要调整那些有点用彩盒更好的工作。首先，我们需要保留URI和querystrings。其次，我们不仅需要onLoad中的$.colorbox.close();函数，还需要onClosed中的history.replaceState，以便正常关闭（esc，overlay click等）根据需要对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); 
    } 
});

来源

2016-07-07 15:16:41 dhaupin

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

回答

相关问题