I have successfully created my own webpage and am now looking to incorporate some JavaScript into it. My goal is to have a functionality where clicking on a p tag within a div will trigger the appearance of a black div with approximately 70% opacity covering the entire page. On top of this overlay, an alert box containing text should appear that can be closed to make both the alert box and black div disappear. However, I am encountering issues in creating the black div using only HTML, CSS, and JavaScript without relying on jQuery.
Here is the HTML:
<div class="varuhus">
<p onclick="varuhusAlmhult()">Älmhult</p>
<p onclick="varuhusStockholm()">Stockholm</p>
<p onclick="varuhusMalmo()">Malmö</p>
</div>
In the updated JavaScript section:
function varuhusAlmhult() {
var backgroundDiv = document.createElement("DIV");
document.body.appendChild(backgroundDiv);
backgroundDiv.style.width = "100%";
backgroundDiv.style.height = "100%";
backgroundDiv.style.backgroundColor = 'black';
backgroundDiv.style.opacity = .7;
}