Табуляция под модальным окном

Radrigo

20 ноября 2022, 19:23

147

Всем привет.

Прошу подсказки.

Написал небольшой скрипт для модального окна. Всё работает отлично, однако навигация при помощи табуляции переключается по ссылкам под модальным окном. Не могу понять как сделать, чтобы при открытии модального окна табуляция работала только в модальном окне.

$(document).ready(function () {
        $('.btn-modal').click(function () {
                let id = $(this).attr('data-modal'),
                        scrollWidth = window.innerWidth - $(document).width();
                $('body')
                        .addClass('body-modal')
                        .css('padding-right', scrollWidth + 'px');
                $('.box-modal[data-modal=' + id + ']')
                        .css('display', 'block')
                        .animate({ opacity: 1 }, 200);
                setTimeout(function () {
                        $('.box-modal[data-modal=' + id + '] .modal-dialog').animate({ opacity: 1 }, 200);
                }, 200);
                return false;
        });
        // Функция закрытия
        function functionClose() {
                $('.box-modal .modal-dialog').animate({ opacity: 0 }, 200);
                setTimeout(function () {
                        $('.box-modal')
                                .animate({ opacity: 0 }, 200);
                }, 200);
                setTimeout(function () {
                        $('.box-modal')
                                .css('display', '')
                        $('body')
                                .removeClass('body-modal')
                                .css('padding-right', '');
                }, 400);
        };
        // Клик по кнопке "Закрыть".
        $('.box-modal .close').click(function () {
                functionClose()
                return false;
        });
        // Закрытие по клавише Esc.
        $(document).keydown(function (e) {
                if (e.keyCode === 27) {
                        e.stopPropagation();
                        functionClose()
                }
        });
        // Клик по фону, но не по окну.
        $('.box-modal').click(function (e) {
                if ($(e.target).closest('.modal-dialog').length == 0) {
                        functionClose()
                }
        });
});

Примерно такой html код для наглядности

<body>
   <header>***</header>
   <main>***</main>
   <footer>***</footer>
   <div class="box-modal" data-modal="login">
      <div class="modal-dialog">
         <div>***</div>
         <button type="button" class="close"><i class="icon icon-close"></i></button>
      </div>
   </div>
   <style>
      .box-modal {
         display: none;
         opacity: 0;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: 1050;
         overflow-x: hidden;
         overflow-y: auto;
         outline: 0;
      }

      .box-modal::after {
         display: block;
         content: "";
         position: fixed;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         background-color: #000;
         opacity: 0.5;
         z-index: 1060;
      }

      .modal-dialog {
         position: relative;
         z-index: 1100;
         width: 100%;
         background-color: #fff;
         overflow-y: auto;
         max-width: 420px;
         margin: 1.75rem auto;
         height: auto;
         border: 1px solid rgba(0, 0, 0, 0.2);
         border-radius: 0.3rem;
         opacity: 0;
      }

      .modal-dialog .close {
         text-shadow: 0 1px 0 #fff;
         color: rgba(0, 0, 0, 0.5);
         position: absolute;
         padding: 10px;
         top: 0;
         right: 0;
         border: 0 none;
         cursor: pointer;
         overflow: hidden;
         text-decoration: none !important;
         background: transparent;
      }

      .modal-dialog .close .icon {
         display: block;
         overflow: hidden;
         font-size: 30px;
         font-weight: 300;
      }
   </style>
</body>

Нашёл такой вариант на просторах интернета. Он всё работает, однако при открытии модального окна фокус оказывается на первом элементе, что мне не надо, так как это ссылка. Может поможете понять, как изменить, чтобы при открытии модального окна фокус не был установлен, однако при табуляции фокус гулял только в блоке по модельному окну. Ну или может есть какой-то другой вариант.

var TabLim = {};

TabLim.activate = function(el) {
    TabLim.deactivate();
    TabLim._el = el;
    $(window).on('keydown', TabLim._handleTab);
    return TabLim;
};

TabLim.deactivate = function() {
    TabLim._el = null;

    // detach old focus events
    TabLim._detachFocusHandlers();

    TabLim._els = null;
    TabLim._currEl = null;
    $(window).off('keydown', TabLim._handleTab);
    return TabLim;
};

TabLim.setFocus = function(prev) {
    // detach old focus events
    TabLim._detachFocusHandlers();

    // scan for new tabbable elements
    var tabbables = TabLim._el.find(':tabbable');
    TabLim._els = [];

    // wrap elements in jquery
    for ( var i = 0; i < tabbables.length; i++) {
        var el = $(tabbables[i]);
        // set focus listener on each element
        el.on('focusin', TabLim._focusHandler);
        TabLim._els.push(el);
    }

    // determine the index of focused element so we will know who is
    // next/previous to be focused
    var currIdx = 0;
    for ( var i = 0; i < TabLim._els.length; i++) {
        var el = TabLim._els[i];

        // if focus is set already on some element
        if (TabLim._currEl) {
            if (TabLim._currEl === el[0]) {
                currIdx = i;

                prev ? currIdx-- : currIdx++;
                break;
            }

        } else {
            // focus is not set yet.
            // let's set it by attribute "autofocus".
            if (el.attr('autofocus') !== undefined) {
                currIdx = i;
                break;
            }
        }
    }

    if (currIdx < 0) {
        currIdx += TabLim._els.length;
    }
    if (TabLim._els.length) {
        TabLim._els[Math.abs(currIdx % TabLim._els.length)].focus();
    }
    return TabLim;
};

TabLim._handleTab = function(e) {
    if (e.which === 9) {
        e.preventDefault();
        TabLim.setFocus(e.shiftKey);
    }
};

TabLim._focusHandler = function(e) {
    TabLim._currEl = e.currentTarget;
};

TabLim._detachFocusHandlers = function() {
    if (TabLim._els) {
        for ( var i = 0; i < TabLim._els.length; i++) {
            TabLim._els[i].off('focusin', TabLim._focusHandler);
        }
    }
};


// для активации
TabLim.activate($('.box-modal')).setFocus();

// для деактивации
TabLim.deactivate();

Заранее всем признателен за подсказку.

Переиграть и победить: как анализировать конкурентов для продвижения сайта

Курс биткоина превысил $50 тысяч

Табуляция под модальным окном