我试图在模态框打开时，焦点应该移动到模态框内的第一个可聚焦元素（比如关闭按钮）。此外，在模态框打开时，用户只能导航
我试图在模式打开时将焦点移动到模式内的第一个可聚焦元素（例如关闭按钮）。此外，当模式打开时，用户只能使用 Tab 键在模式内的元素之间导航。
我试过下面的代码。但它陷入了模式，但在一些选项卡之后它转到浏览器的地址栏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.modal {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: auto;
z-index: 999;
background-color: aliceblue;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button class="openModal">Open Modal</button>
<div class="modal">
<button class="closeModal">Close Modal</button>
<h4>Text here</h4>
<a href="/main-page">Link to Main page</a>
</div>
<a href="/home">Home</a>
<a href="/about">About</a>
<script>
$(document).on('click', '.openModal', function (e) {
$('.modal').fadeIn();
$('button').attr('tabindex', '-1');
$('a').attr('tabindex', '-1');
$('.modal button').removeAttr('tabindex',);
$('.modal a').removeAttr('tabindex',);
});
$(document).on('click', '.closeModal', function (e) {
$('.modal').fadeOut();
$('button').removeAttr('tabindex',);
$('a').removeAttr('tabindex',);
});
</script>
</body>
</html>
