Добавьте фокус, чтобы вспять / модально на щелчок для вкладок / доступности - JavaScript ⇐ Html

[Anonymous]

У меня есть всплывающее окно/наложение, которое появляется на «щелчке» элемента. Поскольку за всплывающим окном есть много HTML-контента, кнопки/входные элементы на POP, естественно, не имеют поведения Focus/tabindex. По причинам доступности мне это хотелось, так что, когда этот всплывающий нас показывает элементы внутри модала, имеют приоритет индекса фокусировки/вкладок, а не основное содержание, стоящее за ним. Очень признателен. Ответьте на работу, но когда вы удерживаете клавишу Enter вниз, он мигает между появлением наложения и не появляется, и он, кажется, не работает в Safari?

Код: Выделить всё

let clickMe = document.querySelector('#click-me'),
modal = document.querySelector('.modal'),
closeButton = document.querySelector('.close')

clickMe.addEventListener('click', () => {
modal.style.display = 'flex';
// modal.focus();
})

closeButton.addEventListener('click', () => {
modal.style.display = 'none';
})< /code>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

input, button {
margin: 1rem;
padding: .5rem;
}
.click-me {
display: block;
}

.modal {
display: none;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
background: grey;
position: absolute;
}

form {
display: flex;
}< /code>
Click Me







Close x
More Buttons
More Buttons

Подробнее здесь: https://stackoverflow.com/questions/720 ... javascript