Tengo 6 imágenes en una página en las que puedo hacer clic para ampliar usando un contenedor modal y agregar o eliminar una opacidad. Haré lo mismo en una segunda página y estoy tratando de averiguar cómo acortar el código en lugar de escribir individualmente cada uno.

El HTML se parece a:

 <section class="container-footwear"> <div class="article-large"> <article class="footwear"> <p> <img src="images/KSwiss.jpg" alt="" class="footwear-image" id="fi-1" />Text </p> </article> </div> <div class="modal-container" id="modal-container1"> <div class="modal"> <img class="modal-img" src="images/KSwiss.jpg" alt="" /> <button class="footwear-button" id="close1">x</button> </div> </div> ...(this carries on using the same pattern to id="fi-6") </section>

Entonces el CSS relacionado con el contenedor modal es:

 .modal-container { display: flex; align-items: center; justify-content: center; position: fixed; opacity: 0; pointer-events: none; top: 0; left: 0; height: 100vh; width: 100%; background-color: rgba(0, 0, 0, 0.2); transition: opacity 0.3s ease; }

 .modal-container.show { pointer-events: auto; opacity: 1; z-index: 999; }

y el JS que controla es así:

// Artículo 1. //Inicializando las variables que contienen el ID de la imagen.

 const open1 = document.getElementById("fi-1");

 const modalContainer1 = document.getElementById("modal-container1");

 const close1 = document.getElementById("close1");

//Añadiendo la función para cambiar la opacidad a través del selector de show.

 open1.addEventListener("click", () => { modalContainer1.classList.add("show"); });

 close1.addEventListener("click", () => { modalContainer1.classList.remove("show"); });

Intenté usar un bucle o una nueva función que se llama onclick en el HTML. Todavía no estoy lo suficientemente familiarizado con las cosas de DOM para conocer todos los diferentes comandos. ¿Puede alguien darme un puntero en la dirección correcta? Debe haber una manera de tener una función que reaccione a cualquier imagen en la que se haga clic en lugar de repetir los mismos comandos una y otra vez solo para una nueva identificación de imagen.