I'm pretty new to web development and I'm trying to create a series of buttons that, when clicked, triggers an overlay specific to that button. The following code from W3schools creates a button and the overlay effect.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="overlay" onclick="off()">
<div id="text">Text 1</div>
</div>
<div style="padding:20px">
<h2>Overlay with Text</h2>
<button onclick="on()">Button 1</button>
</div>
<script>
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
</script>
</body>
</html>
How can I modify this code to add another button that, when clicked, displays <div id="text">Text 2</div> within the overlay? So, when Button 1 is clicked, "Text 1" is displayed within the overlay and when Button 2 is clicked, "Text 2" is displayed.
A way you can do this is by giving your overlays classes with which you can select them from JavaScript. Give each overlay a unique id to identify it with.
<div class="overlay js-overlay" id="overlay-one" hidden>
...
</div>
Now you buttons should also have a class to identify them with. Give your button a value attribute in which you set the id of the overlay that the button belongs to.
<button class="js-overlay-trigger" type="button" value="overlay-one">Open overlay</button>
Now in JavaScript. Select all buttons with document.querySelectorAll. Loop over each button and add an event listener to it. This is (almost) the same as an onclick attribute, but you gives you much more flexibility and imo should be used in favor of the inline attribute.
Create a function that reads the value of the clicked button, this contains the id of the overlay we need. Select the element from the document based on the value in the value property. If the overlay is found, then the overlay will be shown.
const triggers = document.querySelectorAll('.js-overlay-trigger');
function showOverlay(event) {
const selector = event.target.value;
const overlay = document.getElementById(selector);
if (overlay !== null) {
overlay.hidden = false;
}
}
for (const trigger of triggers) {
trigger.addEventListener('click', showOverlay);
}
This example uses the hidden attribute and property to show overlay. But you can also add or remove CSS classes to get the same behavior. The style property should be used as a last resort.
The closing of the overlays is done almost in the same manner. First you select all the overlays. Loop over each overlay and attach an event listener. The function attached to the event should hide the currently clicked overlay.
const overlays = document.querySelectorAll('.js-overlay');
function closeOverlay(event) {
const overlay = event.currentTarget;
overlay.hidden = true;
}
for (const overlay of overlays) {
overlay.addEventListener('click', closeOverlay);
}