早上好，我尝试创建的弹出窗口的样式有问题，单击按钮时会显示弹出窗口并在单击弹出窗口主体时保持焦点，尽管单击在其中弹出，弹出窗口失去焦点。
单击弹出窗口中的任何子元素时如何保持焦点在弹出窗口上？
非常感谢。
<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>
最佳答案
问题是，一旦您点击弹出窗口中的子元素，您的按钮就不再处于焦点状态，弹出窗口将不会显示。
这不能仅在 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';
}
}
关于html - 焦点选择器，保持焦点在弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24079419/