I received a code from the internet that allows me to click on text and open a box.
However, I am looking to add functionality to close the box when I click outside of it.
Here is the javascript code I am using:
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
Here is the corresponding HTML code:
<div value='Show Layer' onclick="setVisibility('sub2', 'inline');">
<span>SHOW BOX</span>
</div>
<div id="sub2">
<p>This is a test for the box.</p>
<button value='Hide Layer' onclick="setVisibility('sub2', 'none');" ;>Click to close the box</button>
</div>
And here is the CSS code I have implemented:
#sub2 { width: 500px; color: black; display: none; background:#eeeeee; display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; overflow: auto; / }
#sub2 h5 { font-family: 'Varela Round', sans-serif; font-size:20px; }