Как запретить выбор всех элементов через tab, кроме тех, которые открыты в попапе

Question

Есть страница с попапом. Как сделать так, чтобы при открытии попапа нельзя было добраться до всех элементов страницы через tab, кроме тех элементов, которые есть в попапе. А также, чтобы при открытии попапа он сразу же получал фокус.

вот пример кода: https://codepen.io/talisman4ik123/pen/ExwNaaR

Html:

<body>
  <div class="wrapper">
    <button class="popup-open__btn">Открыть popup</button>
    <div class="popup__bg">
      <div class="popup__body">
        <form action="" class="popup" autocomplete>
          <fieldset class="popup__fieldset">
            <div class="popup__top">
              <legend class="popup__legend">Форма отбратной связи</legend>
              <div class="close-btn__group" tabindex = "0">
                <a href="" class="close-btn">
                  <span class="close-btn__span"></span>
                </a>
              </div>
            </div>
            <input type="text" class="popup__input" placeholder="введите имя">
            <input type="tel" class="popup__input" placeholder="введите телефон">
            <input type="mail" class="popup__input" placeholder="введите email">
            <button type="submit" class="popup__btn">Отправить</button>
          </fieldset>
        </form>
      </div>
    </div>
    <button class="wrapper__btn">1</button>
    <button class="wrapper__btn">2</button>
    <button class="wrapper__btn">3</button>
    <button class="wrapper__btn">4</button>
  </div>
</body>

Css:

button:focus {
  outline: 2px solid gold;
}

.popup__bg {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  overflow-y: auto;
  overflow-x: hidden;
  transition: 0.5s all;
  &.active {
    opacity: 1;
    pointer-events: all;
    transition: 0.5s all;
    visibility: visible;
  }
}

.popup__body {
  min-height: 100%;
  padding: 10px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
  width: fit-content;
  border-radius: 5px;
  background-color: #fff;
  transform: translate(-50%, -50%) scale(0);
  background: #fff;
  transition: 0.5s all;
  &.active {
    transform: translate(0, 0) scale(1);
    transition: 0.5s all;
  }
}

Js:

const popup = document.querySelector('.popup');
const popupBody = document.querySelector('.popup__body');
const popupBg = document.querySelector('.popup__bg');
const popupBtn = document.querySelector('.popup-open__btn');

popupBtn.addEventListener('click', (e) => {
  e.preventDefault();
  popup.classList.add('active');
  popupBg.classList.add('active');
});

document.addEventListener('click', (e) => {
  if(e.target === popupBody) {
    popupBg.classList.remove('active');
    popup.classList.remove('active');
  }
});

БЛОГ НА HUSL

Как запретить выбор всех элементов через tab, кроме тех, которые открыты в попапе

Ответы (0 шт):