Twitter bootstrap 启动模式激活时禁用tab键聚焦

在Bootstrap3中，我有一个模式窗口，当您单击

.btn

链接时，它会弹出

当它处于活动状态时，用户仍然可以按Tab键来关注背景中的链接和按钮，其中一些链接和按钮具有工具提示等。当这些链接被关注时，它们的工具提示与模态窗口重叠，这看起来有点傻

---

是否有方法在模式窗口处于活动状态时禁用Tab，并在其关闭时重新启用Tab？

您可以使用以下命令禁用Tab键

$(document).keydown(function(e) {
    if (e.keyCode == 9) {
        e.preventDefault();
    }
});

---

在调用

e.preventDefault（）

之前，您需要在那里进行某种检查，以查看模态窗口是否打开。您可以通过在模态打开/关闭上设置一个标志，或者简单地检查dom元素是否可见来完成此操作。

此解决方案仍然允许tab键在模态中的任何可聚焦元素上正常工作。只要在加载DOM后调用它，它就可以用于页面上的任何模式

disableTabModalShown = function () {

$('.modal').on('shown.bs.modal', function() {

    var modal = $(this);
    var focusableChildren = modal.find('a[href], a[data-dismiss], area[href], input, select, textarea, button, iframe, object, embed, *[tabindex], *[contenteditable]');
    var numElements = focusableChildren.length;
    var currentIndex = 0;

    $(document.activeElement).blur();

    var focus = function() {
        var focusableElement = focusableChildren[currentIndex];
        if (focusableElement)
            focusableElement.focus();
    };

    var focusPrevious = function () {
        currentIndex--;
        if (currentIndex < 0)
            currentIndex = numElements - 1;

        focus();

        return false;
    };

    var focusNext = function () {
        currentIndex++;
        if (currentIndex >= numElements)
            currentIndex = 0;

        focus();

        return false;
    };

    $(document).on('keydown', function (e) {

        if (e.keyCode == 9 && e.shiftKey) {
            e.preventDefault();
            focusPrevious();
        }
        else if (e.keyCode == 9) {
            e.preventDefault();
            focusNext();
        }
    });

    $(this).focus();
});

$('.modal').on('hidden.bs.modal', function() {
    $(document).unbind('keydown');
});};

disableTabModalShown=函数（）{
$（'.modal'）.on（'show.bs.modal'，function（））{
var modal=$（本）；
var focusableChildren=modal.find（'a[href]、a[data disease]、area[href]、input、select、textarea、button、iframe、object、embed、*[tabindex]、*[contenteditable]）；
var numElements=focusableChildren.length；
var currentIndex=0；
$（document.activeElement.blur（）；
var focus=function（）{
var focusableElement=focusableChildren[currentIndex]；
if（focusableElement）
focusableElement.focus（）；
};
var focusPrevious=函数（）{
当前索引--；
如果（当前索引<0）
currentIndex=numElements-1；
焦点（）；
返回false；
};
var focusNext=函数（）{
currentIndex++；
如果（当前索引>=数值）
currentIndex=0；
焦点（）；
返回false；
};
$（文档）.on（'keydown'，函数（e）{
if（e.keyCode==9&&e.shiftKey）{
e、 预防默认值（）；
聚焦的（）；
}
否则如果（e.keyCode==9）{
e、 预防默认值（）；
focusNext（）；
}
});
$（this.focus（）；
});
$（'.modal'）.on（'hidden.bs.modal'，function（））{
$（文档）。解除绑定（'keydown'）；
});};