twitter-bootstrap - 在 Bootstrap 模式处于事件状态时禁用 Tab 键聚焦

Question

在 Bootstrap 3 中，当您单击 .btn 时，我会弹出一个模式窗口。关联。

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

有没有办法在模式窗口处于事件状态时禁用 Tab，并在关闭时重新启用 Tab？

Answer 1

此解决方案仍然允许 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');
});};