Skip to main content
1 de 3
JoseMgz_Ux
  • 724
  • 3
  • 18

El en HTML se agregó un div que va a contener todas las imágenes o sea los ul con sus li como también añadí sus respectivas clases (Cambie los IDs por clases) que me ayudaran a gestionarlo el js.

HTML

<div class="gallery">
        <ul class="thumbItems">
            <li class="menu" data-wow-delay="0.4s">
                <a href="#" id="open">
                    <div class="portfolio-img bg-extra-dark-gray"><img src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit."/></div>
                </a>    
                    <span class="portfolio-item-title">Lorem ipsum.</span>
            </li>
            <li class="menu" data-wow-delay="0.4s">
                <a href="#" id="open">
                    <div class="portfolio-img bg-extra-dark-gray"><img src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit."/></div>
                </a>    
                    <span class="portfolio-item-title">Lorem ipsum.</span>
            </li>
        </ul> 
        <div class="modal-container" id="modal_container">
            <div class="centrate">
              <img title="modal" src="https://image.shutterstock.com/image-vector/avatar-man-icon-profile-placeholder-260nw-1229859850.jpg" />
              <p style="color: aliceblue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum condimentum ligula, sit amet consectetur sapien. Sed porta nunc id dapibus blandit.</p>
              <button id="close" href="#">Cerrar</button>
            </div>
          </div>  
    </div>

JavaScript

Si vez solo capture la clase de gallery que es el div que contiene las imágenes y utilice querySelectorAll porque son clases y no getElementById.

Luego como es un querySelectorAll este devuelve un objeto similar a una matriz denominado lista de nodos. Luego esa lista de nodos la recorro con un forEach y capturo el evento click de cada imagen.

const gallery = document.querySelectorAll(".thumbItems")
    const close = document.getElementById('close');

        gallery.forEach((item) => {
            item.addEventListener("click", function() {
                modal_container.classList.add('show');
            });
        })

    close.addEventListener('click', () => {
        modal_container.classList.remove('show');
    });

CSS (Se quedo igual)

 .modal-container{
            background: rgba(0,0,0,0.75);
            align-items: center;
            justify-content: center;
            position: fixed;
            pointer-events: none;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 100vh;
            width: 100vw;
            opacity: 0;
            z-index: 2;
            vertical-align: middle;
            }  

        .show{
            pointer-events: auto;
            opacity: 1;
            z-index: 2;
        }
           
        .centrate{
            margin: 0;
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
        }
JoseMgz_Ux
  • 724
  • 3
  • 18