Question

我正在使用jQuery Colorbox库，它是一个创建Modals的库，可以在一个漂亮的弹出模式窗口中加载图像和其他内容。

我在我的投资组合/项目页面上使用它以允许点击屏幕截图图像，它会将更大的图像视图加载到弹出模式窗口中。在Colorbox模式中打开时，我可以使用我的键盘LEFT和RIGHT键在我在页面上附加颜色框的所有图像之间导航。

我的问题是我的项目页面上还有一些JavaScript设置，允许用户使用LEFT和RIGHT箭头键导航到Next和Previous项目页面。

因此，在查看“项目”页面时，左右箭头键可以完美地加载和浏览我的整个项目组合。只要我点击一个在Colorbox模态窗口中加载的图像。我遇到了我的问题！

现在我的项目导航箭头键继续工作，但我的Colorbox键导航不起作用。

当打开并关闭模态时，Colorbox会触发某些EVENTS。

所以我希望在打开模态时，我可以禁用我的项目键盘导航。

当关闭相同的模态时，我可以将键盘导航功能恢复为我的项目！

问题是我不知道该怎么做并需要一些帮助！

我在下面有一些有用的代码片段......

此处的jQuery Colorbox Modal库的文档站点http://www.jacklmoore.com/colorbox/

这是处理我的项目键盘导航的代码。

  // Handle Right and Left Keyboard Arrow presses to navigate to Next or Previous Project
  $("body").keydown(function(e) {
    if(e.which === 37) { // left
      $("#page-left").parent("a")[0].click();
    }
    else if(e.which === 39) { // right
      $("#page-right").parent("a")[0].click();
    }
  });

这是处理我的Colorbox启动的代码。

  // Setup my Colorbox modal for project images
  $(".projectFUllModal").colorbox({
    rel:'projectFUllModal',
    transition:"none",
    width:"90%",
    height:"90%"
  });

以下代码是Colorbox文档中的示例代码，介绍了如何使用它可以触发的事件。

  // Colorbox Event for Opening a Modal
  $(document).bind('cbox_open', function(){
    // Disable my Project keyboard navigation functionality
  });

  // Colorbox Event for Closing a Modal
  $(document).bind('cbox_closed', function(){
    // Restore my Project keyboard navigation functionality
  });

可用的Colorbox活动

  cbox_open triggers when Colorbox is first opened, but after a few key variable assignments take place.
  cbox_load triggers at the start of the phase where content type is determined and loaded.
  cbox_complete triggers when the transition has completed and the newly loaded content has been revealed.
  cbox_cleanup  triggers as the close method begins.
  cbox_closed triggers as the close method ends.

Answer 1

通过添加布尔值var：

，这实际上很容易修复

// Handle Right and Left Keyboard Arrow presses to navigate to Next or Previous Project
var canUseArrows = true;
$("body").keydown(function(e) {
    if(e.which === 37 && canUseArrows) { // left
        $("#page-left").parent("a")[0].click();
    }
    else if(e.which === 39 && canUseArrows) { // right
        $("#page-right").parent("a")[0].click();
    }
});

这些功能只会改为：

// Colorbox Event for Opening a Modal
$(document).bind('cbox_open', function(){
    canUseArrows = false;
});

// Colorbox Event for Closing a Modal
$(document).bind('cbox_closed', function(){
    canUseArrows = true;
});

Here's a fiddle showing it working, with checkbox checked simulating a cbox being open.

Answer 2

我不确定何时添加，但现在您可以使用arrowKey选项禁用彩盒中的箭头键导航。

触发Colorbox Event时禁用键盘快捷键，然后在另一个事件触发时恢复它？

2 个答案: