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

焦点选择器，继续关注弹出窗口

1 个答案: