Soy bastante nuevo en el desarrollo web y estoy tratando de crear una serie de botones que, al hacer clic, activan una superposición específica para ese botón. El siguiente código de W3schools crea un botón y el efecto de superposición.
<!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> ¿Cómo puedo modificar este código para agregar otro botón que, al hacer clic, muestre <div id="text">Text 2</div> dentro de la superposición? Por lo tanto, cuando se hace clic en el Botón 1, se muestra "Texto 1" dentro de la superposición y cuando se hace clic en el Botón 2, se muestra "Texto 2".
Una forma de hacerlo es dando a sus superposiciones clases con las que puede seleccionarlas desde JavaScript. Asigne a cada superposición una identificación única para identificarla.
<div class="overlay js-overlay" id="overlay-one" hidden> ... </div> Ahora sus botones también deben tener una clase para identificarlos. Asigne a su botón un atributo de value en el que establezca la id de la superposición a la que pertenece el botón.
<button class="js-overlay-trigger" type="button" value="overlay-one">Open overlay</button> Ahora en JavaScript. Seleccione todos los botones con document.querySelectorAll . Pase por encima de cada botón y agréguele un detector de eventos. Esto es (casi) lo mismo que un atributo onclick , pero le brinda mucha más flexibilidad y debe usarse imo a favor del atributo en línea.
Cree una función que lea el value del botón en el que se hizo clic, esto contiene la id de la superposición que necesitamos. Seleccione el elemento del documento según el valor de la propiedad de value . Si se encuentra la superposición, se mostrará la superposición.
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); } Este ejemplo usa el atributo y la propiedad hidden para mostrar la superposición. Pero también puede agregar o eliminar clases de CSS para obtener el mismo comportamiento. La propiedad de style debe utilizarse como último recurso.
El cierre de las superposiciones se realiza casi de la misma manera. Primero selecciona todas las superposiciones. Recorra cada superposición y adjunte un detector de eventos. La función adjunta al evento debe ocultar la superposición en la que se ha hecho clic actualmente.
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); }