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，结果是什么：？< / p>

Answer 1

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

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

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

Colorbox的tabindex =＆＃34; -1＆＃34;属性可防止焦点和表单字段上的类型

1 个答案: