I want to create a partially transparent overlay that covers an entire web page, similar to the example here:
<div id="overlaySplash" onclick="clickHandler(this)">
<div id="insideBox">
[ insert clickable elements here with onclick="dosomething()" ]
</div>
</div>
css
#overlaySplash {
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
background: rgb(50, 50, 50);
background: rgba(0, 0, 0, .50);
z-index: 50;
}
#insidebox {
position: absolute;
z-index: 100;
left: 15%;
right: 15%;
bottom: 5%;
line-height: 50px;
text-align: left;
}
The issue I'm facing is that I am not using jQuery and the overlay div contains clickable elements. When I click on an element inside the main overlay div, JavaScript returns the ID of the overlay div itself, not of the clicked element. This makes it difficult to determine where exactly the user clicked.
function clickHandler(e){ //hide the div overlaySplash
e = e || event;
alert(e.id);
}
THE BOTTOM LINE:
If the user clicks on a label inside the div: dosomething();
If the user clicks on the background (the DIV itself): closeOverlaySplash();