3

Tengo el siguiente código en HTML, CSS y JS, el cual es una section con div> mas adentro, el cual cada una es una ventana modal, el problema es que el código javascript me parece muy enredado o confuso, seleccioné cada <div> por su posición [] desde la variable en todos lo casos

¿Habrá alguna forma de hacerlo más entendible?

Usé un for para poder agregar el evento click a cada imagen para al momento de dar click me mostrará el modal, pero luego me surgió el problema de cómo saber a cuál <div> o imagen le doy click intente usando un if(target === ) pero no funcionó, después otro problema me surgió en el de la imagen para poder acceder a la primera, segunda y tercera, igual use un for pero no me salió.

Tengo la idea de como mas o menos debe ser, pero al aplicarlo en el código no me sale.

Este es mi código

let imagenUno = document.querySelector('#uno'),//Selecciona el primer DIV
imagenDos = document.querySelector('#dos'),//Selecciona el segundo DIV
imagenTres = document.querySelector('#tres');//Selecciona el tercer DIV

let modalContainerUno = document.querySelectorAll('.modal-container')[0],
modalContainerDos = document.querySelectorAll('.modal-container')[1],
modalContainerTres = document.querySelectorAll('.modal-container')[2];

let modalUno = document.querySelectorAll('.modal')[0],
modalDos = document.querySelectorAll('.modal')[1],
modalTres = document.querySelectorAll('.modal')[2];

let cerrarUno = document.querySelectorAll('.close')[0],
cerrarDos = document.querySelectorAll('.close')[1],
cerrarTres = document.querySelectorAll('.close')[2];


//EVENTOS

imagenUno.addEventListener('click', abrirCerrarModalUno);
imagenDos.addEventListener('click', abrirCerrarModalDos);
imagenTres.addEventListener('click', abrirCerrarModalTres);

// FUNCIONES
function abrirCerrarModalUno(){

    abrirModal();
    function abrirModal(){
        modalContainerUno.style.opacity = '1';
        modalContainerUno.style.visibility = 'visible';
        if(modalUno.classList.contains('modal-close')){
            modalUno.classList.remove('modal-close')
        }
        cerrarModal();
    }

    //Cerar modal desde la X
    function cerrarModal(){
        cerrarUno.addEventListener('click', () => {
            setTimeout(()=>{
                modalContainerUno.style.opacity = '0';
                modalContainerUno.style.visibility = 'hidden';
            },700)

            if(modalUno.classList.contains('modal')){
                modalUno.classList.add('modal-close')
            }
        })
    }

    // Cerrar modal desde cualquier parte negra del DOM
    document.addEventListener('click', (e) =>{
        if(e.target === modalContainerUno){
            if(modalUno.classList.contains('modal')){
                modalUno.classList.add('modal-close')
            }

            setTimeout(()=>{
                modalContainerUno.style.opacity = '0';
                modalContainerUno.style.visibility = 'hidden';
            },700)
        }
    })


}

function abrirCerrarModalDos(){

    abrirModal();
    function abrirModal(){
        modalContainerDos.style.opacity = '1';
        modalContainerDos.style.visibility = 'visible';
        if(modalDos.classList.contains('modal-close')){
            modalDos.classList.remove('modal-close')
        }
        cerrarModal();
    }

    //Cerar modal desde la X
    function cerrarModal(){
        cerrarDos.addEventListener('click', () => {
            setTimeout(()=>{
                modalContainerDos.style.opacity = '0';
                modalContainerDos.style.visibility = 'hidden';
            },700)

            if(modalDos.classList.contains('modal')){
                modalDos.classList.add('modal-close')
            }
        })
    }

    // Cerrar modal desde cualquier parte negra del DOM
    document.addEventListener('click', (e) =>{
        if(e.target === modalContainerDos){
            if(modalDos.classList.contains('modal')){
                modalDos.classList.add('modal-close')
            }

            setTimeout(()=>{
                modalContainerDos.style.opacity = '0';
                modalContainerDos.style.visibility = 'hidden';
            },700)
        }
    }) 
}



function abrirCerrarModalTres(){

    abrirModal();
    function abrirModal(){
        modalContainerTres.style.opacity = '1';
        modalContainerTres.style.visibility = 'visible';
        if(modalTres.classList.contains('modal-close')){
            modalTres.classList.remove('modal-close')
        }
        cerrarModal();
    }

    //Cerar modal desde la X
    function cerrarModal(){
        cerrarTres.addEventListener('click', () => {
            setTimeout(()=>{
                modalContainerTres.style.opacity = '0';
                modalContainerTres.style.visibility = 'hidden';
            },700)

            if(modalTres.classList.contains('modal')){
                modalTres.classList.add('modal-close')
            }
        })
    }

    // Cerrar modal desde cualquier parte negra del DOM
    document.addEventListener('click', (e) =>{
        if(e.target === modalContainerTres){
            if(modalTres.classList.contains('modal')){
                modalTres.classList.add('modal-close')
            }

            setTimeout(()=>{
                modalContainerTres.style.opacity = '0';
                modalContainerTres.style.visibility = 'hidden';
            },700)
        }
    })  
}
section{
    width: 100%;
    height:;
    margin-top: 90px;
}

section .proyectos{
    width: 90%;
    height: 600px;
    margin: 100px auto 0 auto;
}

section  h1{
    text-align: center;
    font-size: 29px;
    text-transform: uppercase;
    font-weight: 300;
    display: flex;
    justify-content: center;
}

section  h1::before{
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    top: 150px;
    background-image: linear-gradient(to right, #ffffff, #f6e4f9, #fec5e2, #ffa5b6, #ff8b7b, #ff8b7b, #ff8b7b, #ff8b7b, #ffa5b6, #fec5e2, #f6e4f9, #ffffff);

}

/** ESTILOS MODAL - HOVER **/
section .proyectos{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}


section .proyectos .contenedor-modal{
    display: flex;
    justify-content: space-around;
    margin-bottom: 50px;
}

section .proyectos .contenedor-modal .contenedor{
    width: 370px;

}

section .proyectos .contenedor-modal .contenedor .imagen{
    position: relative;
    overflow: hidden;/**OCULTA LOS ELEMENTOS  QUE SOBRESALE DE UN DIV**/
    border: 1px solid black;
    box-shadow: 0px 1px 20px;
    cursor: zoom-in;
}

section .proyectos .contenedor-modal .contenedor .imagen img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: all 500ms ease-out;
}

/** ESTILOS PARA EL EFECTO HOVER - LUPA**/
section .proyectos .contenedor-modal .contenedor .imagen .capa{
    position: absolute;
    background: rgba(0, 0, 0, 0.39);
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    text-align: center;
}
/** CAMBIAMOS EL TAMAÑO DE LA LUPA EN EL EFECTO HOVER**/
section .proyectos .contenedor-modal .contenedor .imagen:hover .capa{
    opacity: 1;
    visibility: visible;
}

section .proyectos .contenedor-modal .contenedor .imagen:hover .capa h3{
    margin-top: 220px;
    margin-bottom: ;
    color: #000;
}

section .proyectos .contenedor-modal .contenedor .imagen:hover img{
    transform: scale(1.2);
}

section .proyectos .contenedor-modal .contenedor .imagen .capa h3{
    color: #fff;
    font-weight: bold;
    margin-bottom:-20px;
    transition: all 500ms ease-out;
}

section .proyectos .contenedor-modal .contenedor .imagen .capa img{
    width: 220px;
    height: 220px;
    margin-top: -200px;
    margin-left: 20px;
}

section .proyectos .contenedor-modal .contenedor .imagen .capa p{
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    width: 100%;
    margin-top: -10px;
    margin-bottom: -100px;
}

section .proyectos .contenedor-modal .contenedor .imagen:hover .capa p{

}


/** ESTILOS DEL MODAL AL HACER CLICK EN LA IMAGEN AGRANDARLA **/

.modal-container{
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    position: fixed;/**DAR EL COLOR NEGRO TRANSPARENTE A TODA LA PAGINA AL DAR CLICK EN LA IMAGEN**/
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.5);
}

.modal{
    width: 70%;
    height: 90%;
    background: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: relative;
    transition: transform 1s;
    transform: translateY(0%);
    border-radius: 10px;
}

.close{
    position: absolute;
    top: 5px;
    right: 15px;
    display: inline-block;
    width:25px;
    height:25px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    font-weight: 900;
    font-size: 15px;
    cursor: pointer;
    line-height: 25px;
}


.modal-close{
    transform: translateY(-200%)
}


.modal > img{
    width: 95%;
    margin: 0px auto 0 auto;
}

.modal .modal-textos h2{
    font-size: 22px;
    margin-top: -45px;
}
<section>
       <h1>Proyectos</h1>
        <div class="proyectos">

                <div class="contenedor-modal" id="contenedor-modal">
                   <div class="contenedor">
                       <div class="imagen uno" id="uno">
                           <img src="img/proyecto-uno.png" >
                           <div class="capa">
                               <h3><img src="img/lupa2.png" alt="" ></h3>
                                <p>Pagina Web - Noticias</p>
                           </div>
                       </div>
                   </div>

                   <div class="modal-container" id="uno">
                        <div class="modal modal-close">
                            <p class="close">X</p>
                            <img src="img/proyecto-uno.png">
                            <div class="modal-textos">
                                <h2>Pagina Web - Noticias</h2>
                            </div>
                        </div>
                    </div>  
                </div>

                <div class="contenedor-modal" id="contenedor-modal">
                   <div class="contenedor">
                       <div class="imagen dos" id="dos">
                           <img src="img/proyecto-dos.png">
                           <div class="capa">
                               <h3><img src="img/lupa2.png" alt="" width='300px'></h3>
                                <p>Sueños En Realidad</p>
                           </div>
                       </div>
                   </div>

                   <div class="modal-container" id="dos">
                        <div class="modal modal-close">
                            <p class="close">X</p>
                            <img src="img/proyecto-dos.png" alt="">
                            <div class="modal-textos">
                                <h2>Sueños En Realidad</h2>
                            </div>
                        </div>
                    </div>  
                </div>

                <div class="contenedor-modal" id="contenedor-modal">
                   <div class="contenedor">
                       <div class="imagen tres" id="tres">
                           <img src="img/proyecto-tres.png">
                           <div class="capa">
                               <h3><img src="img/lupa2.png" alt=""></h3>
                                <p>Artistas Web</p>
                           </div>
                       </div>
                   </div>

                   <div class="modal-container" id="tres">
                        <div class="modal modal-close">
                            <p class="close">X</p>
                            <img src="img/proyecto-tres.png" alt="">
                            <div class="modal-textos">
                                <h2>Artistas Web</h2>
                            </div>
                        </div>
                    </div>  
                </div>
        </div> 
</section>  

1 respuesta 1

5

Si quieres simplificar, no se trata solo del código Javascript, también debes involucrar HTML, porque no es necesario tener más de una ventana modal (al menos con el código que publicas). Ya que las 3 son iguales, solo se actualiza el texto, por ahora solo el título y, en caso de necesitar agregar otras cosas, tienes varias opciones:

  1. Crear un arreglo con textos y agregarlos a la modal de acuerdo a posición del elemento seleccionado
  2. Tener elementos ocultos con los textos deseados y mostrarlos, también de acuerdo a la posición
  3. Usar AJAX para actualizar el contenido, tienes tanto título como posición de elemento

En CSS estás asignando/eliminando una clase para mostrar/oculta la modal, también puedes (o debes) hacerlo con la capa negra, porque opacidad cero y visibilidad oculta siguen manteniendo el elemento al frente de todo y puede capturar enlaces antes del contenido que está debajo.

// Selecciona todas las secciones
let imagenes = document.querySelectorAll('.contenedor-modal .imagen');
// Selecciona capa negra
let modalContainer = document.querySelector('#modal-container');
// Selecciona la ventana modal y botón cerrar
let modal = document.querySelector('.modal');
let cerrar = modal.querySelector('.close');
let modalTexto = modal.querySelector('.modal-textos');

// Asignar evento a imágenes
imagenes.forEach(imagen => imagen.addEventListener('click', abrirModal));
cerrar.addEventListener('click', cerrarModal);

// Abrir modal
function abrirModal(e) {
    modalContainer.classList.add('mostrar');
    modal.classList.remove('modal-close');
    // Obteener el contenedor que recibió link
    let imagen = e.target.closest('.imagen');
    // Obtener texto del elemento que recibió clic
    let titulo = imagen.querySelector('.capa p');
    // Cambiar título de modal
    modalTexto.querySelector('h2').textContent = titulo.textContent;
    // Posición del elemento que recibió click
    let posicion = Array.from(imagenes).indexOf(imagen);
}

//Cerar modal desde la X
function cerrarModal() {
    setTimeout(()=> {
        modalContainer.classList.remove('mostrar');
    }, 700);
    modal.classList.add('modal-close');
}
// Cerrar modal desde cualquier parte negra del DOM
document.addEventListener('click', (e) => {
    if(e.target == modalContainer){
        cerrarModal();
    }
});
section{
    width: 100%;
    height:;
    margin-top: 90px;
}

section .proyectos{
    width: 90%;
    height: 600px;
    margin: 100px auto 0 auto;
}

section  h1{
    text-align: center;
    font-size: 29px;
    text-transform: uppercase;
    font-weight: 300;
    display: flex;
    justify-content: center;
}

section  h1::before{
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    top: 150px;
    background-image: linear-gradient(to right, #ffffff, #f6e4f9, #fec5e2, #ffa5b6, #ff8b7b, #ff8b7b, #ff8b7b, #ff8b7b, #ffa5b6, #fec5e2, #f6e4f9, #ffffff);

}

/** ESTILOS MODAL - HOVER **/
section .proyectos{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}


section .proyectos .contenedor-modal{
    display: flex;
    justify-content: space-around;
    margin-bottom: 50px;
}

section .proyectos .contenedor-modal .contenedor{
    width: 370px;

}

section .proyectos .contenedor-modal .contenedor .imagen{
    position: relative;
    overflow: hidden;/**OCULTA LOS ELEMENTOS  QUE SOBRESALE DE UN DIV**/
    border: 1px solid black;
    box-shadow: 0px 1px 20px;
    cursor: zoom-in;
}

section .proyectos .contenedor-modal .contenedor .imagen img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: all 500ms ease-out;
}

/** ESTILOS PARA EL EFECTO HOVER - LUPA**/
section .proyectos .contenedor-modal .contenedor .imagen .capa{
    position: absolute;
    background: rgba(0, 0, 0, 0.39);
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    text-align: center;
}
/** CAMBIAMOS EL TAMAÑO DE LA LUPA EN EL EFECTO HOVER**/
section .proyectos .contenedor-modal .contenedor .imagen:hover .capa{
    opacity: 1;
    visibility: visible;
}

section .proyectos .contenedor-modal .contenedor .imagen:hover .capa h3{
    margin-top: 220px;
    margin-bottom: ;
    color: #000;
}

section .proyectos .contenedor-modal .contenedor .imagen:hover img{
    transform: scale(1.2);
}

section .proyectos .contenedor-modal .contenedor .imagen .capa h3{
    color: #fff;
    font-weight: bold;
    margin-bottom:-20px;
    transition: all 500ms ease-out;
}

section .proyectos .contenedor-modal .contenedor .imagen .capa img{
    width: 220px;
    height: 220px;
    margin-top: -200px;
    margin-left: 20px;
}

section .proyectos .contenedor-modal .contenedor .imagen .capa p{
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    width: 100%;
    margin-top: -10px;
    margin-bottom: -100px;
}

section .proyectos .contenedor-modal .contenedor .imagen:hover .capa p{

}


/** ESTILOS DEL MODAL AL HACER CLICK EN LA IMAGEN AGRANDARLA **/

.modal-container{ 
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    position: fixed;/**DAR EL COLOR NEGRO TRANSPARENTE A TODA LA PAGINA AL DAR CLICK EN LA IMAGEN**/
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.5);
    transition:all 0.5s ease;
}
.modal-container.mostrar{ 
    opacity: 1;
    visibility: visible;
    z-index: 1000;
}
.modal{
    width: 70%;
    height: 90%;
    background: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: relative;
    transition: transform 1s;
    transform: translateY(0%);
    border-radius: 10px;
}

.close{
    position: absolute;
    top: 5px;
    right: 15px;
    display: inline-block;
    width:25px;
    height:25px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    font-weight: 900;
    font-size: 15px;
    cursor: pointer;
    line-height: 25px;
}


.modal-close{
    transform: translateY(-200%)
}


.modal > img{
    width: 95%;
    margin: 0px auto 0 auto;
}

.modal .modal-textos h2{
    font-size: 22px;
    margin-top: -45px;
}
<section>
       <h1>Proyectos</h1>
        <div class="proyectos">

                <div class="contenedor-modal">
                   <div class="contenedor">
                       <div class="imagen uno" id="uno">
                           <img src="img/proyecto-uno.png" >
                           <div class="capa">
                               <h3><img src="img/lupa2.png" alt="" ></h3>
                                <p>Pagina Web - Noticias</p>
                           </div>
                       </div>
                   </div>
                </div>

                <div class="contenedor-modal">
                   <div class="contenedor">
                       <div class="imagen dos" id="dos">
                           <img src="img/proyecto-dos.png">
                           <div class="capa">
                               <h3><img src="img/lupa2.png" alt="" width='300px'></h3>
                                <p>Sueños En Realidad</p>
                           </div>
                       </div>
                   </div>
                </div>

                <div class="contenedor-modal">
                   <div class="contenedor">
                       <div class="imagen tres" id="tres">
                           <img src="img/proyecto-tres.png">
                           <div class="capa">
                               <h3><img src="img/lupa2.png" alt=""></h3>
                                <p>Artistas Web</p>
                           </div>
                       </div>
                   </div>
                </div>
        </div> 
</section>
<div class="modal-container" id="modal-container">
    <div class="modal modal-close">
        <p class="close">X</p>
        <img src="img/proyecto-tres.png" alt="">
        <div class="modal-textos">
            <h2>Título modal</h2>
        </div>
    </div>
</div>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.