My objective is :
- To display a popin when the user clicks on a button
- To hide the popin when the user clicks elsewhere
I previously implemented this solution successfully: Use jQuery to hide a DIV when the user clicks outside of it
However, I wanted to experiment with something new, so I decided to try using focus()
Here is the code I came up with :
div
{
width: 100px;
height: 100px;
border: 1px solid blue;
}
div:focus
{
background-color: red;
}<script>
function show()
{
document.getElementById("element").focus();
}
</script>
<input type="button" onclick="show()" value="click me!"/>
<div id="element"tabindex="-1">
</div>
After clicking the button, click elsewhere to remove the red backgroundThis approach worked well, but now I want to toggle the block's visibility by clicking the button. The only difference between the two versions is that I added display: block and display: none
div
{
width: 100px;
height: 100px;
border: 1px solid blue;
display: none;
}
div:focus
{
background-color: red;
display: block;
}<script>
function show()
{
document.getElementById("element").focus();
}
</script>
<input type="button" onclick="show()" value="click me!"/>
<div id="element"tabindex="-1">
</div>Unfortunately, this modification is not working as expected. Can anyone help me understand why?