Skip to main content
Cuando editaste al final había código duplicado así que elimine lo primero que pusiste.
Origen Enlace
const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');

open.addEventListener('click', () => {
  modal_container.classList.add('show');
});

close.addEventListener('click', () => {
  modal_container.classList.remove('show');
});
  .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%);
<li class="grid-item animacion wow fadeInUp" 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>


<div class="modal-container" id="modal_container">
  <div class="centrate">
    <img 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>

Como podéis comprobar estoy intentando hacer esto para las siguientes imágenes pero no me está funcionando. No se si al ponerlo así me estoy explicando un poco mejor.

const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');

open.addEventListener('click', () => {
  modal_container.classList.add('show');
});

close.addEventListener('click', () => {
  modal_container.classList.remove('show');
});
  .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%);
<li class="grid-item animacion wow fadeInUp" 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>


<div class="modal-container" id="modal_container">
  <div class="centrate">
    <img 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>

Como podéis comprobar estoy intentando hacer esto para las siguientes imágenes pero no me está funcionando. No se si al ponerlo así me estoy explicando un poco mejor.

Como podéis comprobar estoy intentando hacer esto para las siguientes imágenes pero no me está funcionando. No se si al ponerlo así me estoy explicando un poco mejor.

se eliminaron 193 caracteres en el cuerpo
Origen Enlace
Mar
  • 47
  • 7
   const open = document.getElementById('open');
    const modal_container = document.getElementById('modal_container');
    const close = document.getElementById('close');

    open.addEventListener('click', () => {
      modal_container.classList.add('show');
    });

    close.addEventListener('click', () => {
      modal_container.classList.remove('show');
    });
  .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%);
    <li class="grid-item animacion wow fadeInUp" 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>


    <div class="modal-container" id="modal_container">
      <div class="centrate">
        <img 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>
   const open = document.getElementById('open');
    const modal_container = document.getElementById('modal_container');
    const close = document.getElementById('close');

    open.addEventListener('click', () => {
      modal_container.classList.add('show');
    });

    close.addEventListener('click', () => {
      modal_container.classList.remove('show');
    });
.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%);
    <li class="grid-item animacion wow fadeInUp" 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>


    <div class="modal-container" id="modal_container">
      <div class="centrate">
        <img 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>
const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');

open.addEventListener('click', () => {
  modal_container.classList.add('show');
});

close.addEventListener('click', () => {
  modal_container.classList.remove('show');
});
  .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%);
<li class="grid-item animacion wow fadeInUp" 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>


<div class="modal-container" id="modal_container">
  <div class="centrate">
    <img 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>
Arreglo de código mal puesto
Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28
   const open2 = document.getElementById('open2');
                                    const modal_container2 = document.getElementById('modal_container2');
                                    const close2 = document.getElementById('close2');

                                    open.addEventListener('click', () => {
                                      modal_container2.classList.add('show2');  
                                    });

                                    close.addEventListener('click', () => {
                                      modal_container2.classList.remove('show2');
                                    });
             .modal-container2 {
                                        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;
                                        }
                                
                                    
                                    .show2 {
                                        pointer-events: auto;
                                        opacity: 1;
                                        z-index: 2;
                                    }
                                    
                                    
                                    .centrate {
                                        margin: 0;
                                        position: absolute;
                                        top: 50%;
  left: 50%;
                                        transform: translate(-50%, -50%);
                                        
 <li class="grid-item animacion wow fadeInUp" data-wow-delay="0.4s">
                                    <a href="#" id="open2">
                                        <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>
                                  /></div>
  </a>    
                                        <span class="portfolio-item-title">Lorem ipsum.</span>
                                </li>
                                
                                
                                <div class="modal-container2" id="modal_container2">
                                    <div class="centrate">
                                    <img 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="close2" href="#">Cerrar</button>
                                    </div>
                                </div> 
                                
                                
   const open2 = document.getElementById('open2');
                                    const modal_container2 = document.getElementById('modal_container2');
                                    const close2 = document.getElementById('close2');

                                    open.addEventListener('click', () => {
                                      modal_container2.classList.add('show2');  
                                    });

                                    close.addEventListener('click', () => {
                                      modal_container2.classList.remove('show2');
                                    });
             .modal-container2{
                                        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;
                                        }
                                
                                    
                                    .show2{
                                        pointer-events: auto;
                                        opacity: 1;
                                        z-index: 2;
                                    }
                                    
                                    
                                    .centrate{
                                        margin: 0;
                                        position: absolute;
                                        top: 50%; left: 50%;
                                        transform: translate(-50%, -50%);
                                        
 <li class="grid-item animacion wow fadeInUp" data-wow-delay="0.4s">
                                    <a href="#" id="open2">
                                        <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>
                                
                                
                                <div class="modal-container2" id="modal_container2">
                                    <div class="centrate">
                                    <img 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="close2" href="#">Cerrar</button>
                                    </div>
                                </div> 
                                
                                
const open2 = document.getElementById('open2');
const modal_container2 = document.getElementById('modal_container2');
const close2 = document.getElementById('close2');

open.addEventListener('click', () => {
  modal_container2.classList.add('show2');
});

close.addEventListener('click', () => {
  modal_container2.classList.remove('show2');
});
  .modal-container2 {
  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;
}

.show2 {
  pointer-events: auto;
  opacity: 1;
  z-index: 2;
}

.centrate {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
<li class="grid-item animacion wow fadeInUp" data-wow-delay="0.4s">
  <a href="#" id="open2">
    <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>


<div class="modal-container2" id="modal_container2">
  <div class="centrate">
    <img 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="close2" href="#">Cerrar</button>
  </div>
</div>
se añadieron 258 caracteres en el cuerpo
Origen Enlace
Mar
  • 47
  • 7
Loading
se añadieron 4269 caracteres en el cuerpo
Origen Enlace
Mar
  • 47
  • 7
Loading
Arreglo de código mal puesto
Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28
Loading
cuerpo editado
Origen Enlace
Mar
  • 47
  • 7
Loading
Origen Enlace
Mar
  • 47
  • 7
Loading