焦点选择器，将焦点保持在弹出窗口上

Question

早上，我有一个关于我试图创建的弹出窗口的样式的问题，当一个按钮被点击时，弹出窗口被显示，并在点击弹出窗口主体时保持焦点，尽管当单击弹出窗口中的一个子元素时，弹出窗口失去了焦点。

如何在单击弹出窗口中的任何子元素时保持焦点在弹出窗口上？

非常感谢。

     <html>
       <head>

<style type="text/css">
#modal{display:none;}
#modal:focus {display:block;}
#modal:focus * #modal{display:block;}/*i thought maybe this would apply when any child element of #modal has          focus, although if i give a child element of modal a tabindex, it still doesn't work.*/
.num:focus + #modal{display:block;}
 </style>
</head>

<body>
  <div id="onetwo">
 <input type="button" id="btn1" class="num" tabindex="1" value="Click here"/>
<div id="modal" style="background-color:green;width:200px;height:200px;
position:absolute;top:40%;left:40%;" tabindex="2">
<input type="button" id="btn1" onclick="alert("Alerted")" value="Click.."/>
<input type="text" id="txt1" placeholder="some text"/>
</div>
</div>
</body>

</html>

Answer 1

问题是，只要你点击弹出菜单中的一个子元素，你的按钮就不再是焦点，弹出菜单也不会显示出来。

仅在CSS中很难做到这一点。最好的方法是使用javascript并向按钮添加单击处理程序，以使用CSS显示和隐藏弹出窗口：

var btn = document.getElementById('btn1');

btn.onclick = function() {
    var popup = document.getElementById('modal');

    if(popup.style.display == 'block') {
        popup.style.display = 'none';
    }
    else {
        popup.style.display = 'block';
    }
}

See this Fiddle