javascript - Colorbox的tabindex =“-1”属性可防止在表单字段上进行焦点和键入

Question

我有一个表格，可以在colorbox模态窗口上方正常运行，并且可以使用z-index轻松显示它。当用户打开模式窗口时，可以使用表单提交等，但是字段不能集中用于键入。

我知道逻辑很愚蠢；情态重叠与情态形式（modalception :)，但我认为这需要解决。我已经准备好一个样本：http://jsfiddle.net/4g3426j2/

的HTML：

<a class="modal-img" href="some-image.jpg">Modal Img</a>

<form>
    <textarea></textarea>
    <input type="text" />
    <input type="submit" />
</form>

CSS：

form {
    position: relative;
    z-index: 9999;
}
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9998;}

jQuery的：

$('.modal-img').colorbox({
    width: '80%',
    height: '80%'
});

这是来自colorbox的输出html对象：

<div id="colorbox" class="" role="dialog" tabindex="-1">...</div>

我已经检测到何时从colorbox中删除tabindex="-1"属性，并且一切正常，是否有一种健康的方法来解决此问题而不接触插件javascript，或者我们可以从colorbox中删除tabindex，结果是什么？

Answer 1

将trapFocus设置为false可以解决此问题，这要感谢github上的aik099。

$('.modal-img').colorbox({
    width: '80%',
    height: '80%',
    trapFocus: false
});  

资料来源：https://github.com/jackmoore/colorbox/issues/647#issuecomment-55855910