Question

我有一个div，它是各种东西的容器。有时它包含一些简单的表格和其他布局的东西。但有时候它包含按钮和表格。

此容器div可以模态显示另一个div。我通过简单地使其位置：绝对，并且其顶部/底部/左/右0来实现。它看起来不错但是当我按下tab键时，焦点可以转到div后面的元素。我该如何防止这种情况？

我知道我可以通过设置tabIndex = -1来禁用对一个元素的聚焦，所以我可以迭代但是当模态消失时我需要恢复所有这些元素。这意味着额外的工作。我想知道是否有一般使用jQuery或jqueryui或vanilla js的方式？

修改 jsbin中的工作示例： https://jsbin.com/veciju/1/edit?html,css,js,output

Answer 1

我不确定没有小提琴的确切问题是什么，并且没有检查代码。但这是我的解决方案（纯javascript）希望它有所帮助

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <div id="container">
        <p id="filler">
            Hello World.
        </p>
        <form id="myForm">
            <input type="text" />
            <input type="submit" value="submit"/>
        </form><br>
        <button id="openModal" onclick="openModal();"> Open Modal</button>

        <div id="modal" class="hidden">
            <p id="modelP"> This is a modal DIV. You cannot escape me</p>
            <button id="closeModal" onclick="closeModal();">Close Me</button>
        </div>
    </div>

</body>
<style>
    #container{
        margin: 50px auto;
        padding: 100px;
        color: white;
        width: 50%;
        height:400px;
        background-color: black;
        text-align: center;
    }

    .hidden{
        display: none;
    }

    #modal{
        background-color: green;
        border: 5px solid red;
        z-index: 100;
        width:80%;
        height: 80%;
        left: auto;

    }    

</style>
<script>
    function openModal(){
        var modalElement = document.getElementById('modal');
        var others = document.querySelectorAll('* :not(#closeModal)   ');
        modalElement.removeAttribute('class');

        for (i=0; i<others.length;i++){
            console.log(others[i]);
            others[i].setAttribute('disabled','disabled');
        }



    }

    function closeModal(){
        var modalElement = document.getElementById('modal');
        var others = document.querySelectorAll('* :not(#closeModal)   ');
        modalElement.className='hidden';

        for (i=0; i<others.length;i++){
            console.log(others[i]);
            others[i].removeAttribute('disabled');
        }
    }
</script>

如何防止专注于div上的任何按钮，输入等？

1 个答案: