1

tengo la siguiente pagina, tiene un div .proyectos con 6 divs adentro con la clase contenedor-modal y un <div> afuera del div proyectos, con la clase .modal-container que es un modal. Al dar click a cualquier div contenedor-modal se abre el modal que vendria siendo el div con la clase modal-container el cual muestra una imagen, un titulo y una imagen en forma de flecha la cual esta dentro de un enlace. Al hacer click en el enlace que es la imagen en forma de flecha, quiero que cada una me lleve a diferentes link. Por ejemplo: al dar click en el primer divme abre el modal modal-container y me muestra la imagen, el titulo y el enlace en forma de flecha, al dar click en el enlace quiero que me lleve a una pagina, https://www.google.com/, si doy click en el segundo div con la clase contenedor-modal me muestra el modal pero al dar click en el enlace que me lleve a https://www.facebook.com/, al dar click en el tercer enlace me lleve a https://es.stackoverflow.com/ y asi sucesivamente, que cada enlace me lleve a diferentes paginas, como lo haria?

// Selecciona todas las secciones
let imagenes = document.querySelectorAll('.contenedor-modal .imagen');
// Selecciona capa negra - Modal
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');
    console.log(imagen)

    //Obtener la imagen que esta dentro del contenedor imagen(class='imagen')
    let imagenModal = imagen.querySelector('.img-modal');
    console.log(imagenModal)

    //Obtener la imagen que esta dentro del contenedor #modal-container
    let imagenContainer = modalContainer.querySelector('.img-container')
    console.log(imagenContainer)

    //Cambiar el src(.img-modal) imagen del container por la imagen del modal(imagenModal)
    imagenContainer.src = imagenModal.src;

    // 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%;

    margin-top: 90px;
}

section .proyectos{
    width: 90%;
    height: 600px;
    margin: 100px auto 200px 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{

    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;
}


.modal .modal-textos img{
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 600ms ease;
    display: block;
    margin: 15px auto 0 auto;
}

.modal .modal-textos img:hover{
    transform: rotate(360deg) scale(1.2);

}
<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" class="img-modal" >
                           <div class="capa">
                               <h3><img src="img/lupa2.png" ></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" class="img-modal" >
                           <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" class="img-modal" >
                           <div class="capa">
                               <h3><img src="img/lupa2.png" alt=""></h3>
                                <p>Artistas Web</p>
                           </div>
                       </div>
                   </div>
                </div>

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

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

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

        <div class="modal-container" id="modal-container">
                <div class="modal modal-close">
                    <p class="close">X</p>
                    <img src="" class="img-container">
                    <div class="modal-textos">
                        <h2>Título modal</h2>
                        <a href="https://www.google.com/" target="_blank">
                            <img src="img/brujula-direccional.svg" alt="">
                        </a>
                    </div>
                </div>
            </div>
</section>

4
  • Por favor edita la pregunta para ser más específico y detallado en lo que quieres que se muestre al abrir la modal y de dónde va a tomar los datos; también aclara a qué te refieres con "me lleve a páginas diferentes".
    – Triby
    el 28 ene. 2021 a las 17:53
  • Acabo de editar la pregunta, todo se muestra correctamente, solo quiero cambiar el link en el enlace(a) que esta dentro del .modal-textos. para que cada uno me lleve a un link diferente.(paginas que cree) el 28 ene. 2021 a las 19:17
  • 1
    En el párrafo donde pones título puedes agregar un atributo data-url="pagina.php", diferente para cada uno. Después, lo obtienes con titulo.dataset.url y asignas ese valor al href del enlace.
    – Triby
    el 28 ene. 2021 a las 19:27
  • como lo obtengo.tendra que usar otro lenguaje,no? el 28 ene. 2021 a las 23:38

1 respuesta 1

2

En el párrafo donde tomas el título solo agrega el atributo de datos <p data-url="artistas.php">Artistas Web</p> y puedes poner la URL que prefieras, ya sea dentro de tu proyecto u otro dominio.

// Selecciona todas las secciones
let imagenes = document.querySelectorAll('.contenedor-modal .imagen');
// Selecciona capa negra - Modal
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');
    console.log(imagen)

    //Obtener la imagen que esta dentro del contenedor imagen(class='imagen')
    let imagenModal = imagen.querySelector('.img-modal');
    console.log(imagenModal)

    //Obtener la imagen que esta dentro del contenedor #modal-container
    let imagenContainer = modalContainer.querySelector('.img-container')
    console.log(imagenContainer)

    //Cambiar el src(.img-modal) imagen del container por la imagen del modal(imagenModal)
    imagenContainer.src = imagenModal.src;

    // Obtener texto del elemento que recibió clic
    let titulo = imagen.querySelector('.capa p');

    // Cambiar título de modal
    modalTexto.querySelector('h2').textContent = titulo.textContent;
    
    // Obtener URL desde el titulo
    let url = titulo.dataset.url;

    // Cambiar URL en modal
    modalTexto.querySelector('a').href = url;

}

//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%;

    margin-top: 90px;
}

section .proyectos{
    width: 90%;
    height: 600px;
    margin: 100px auto 200px 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{

    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;
}


.modal .modal-textos img{
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 600ms ease;
    display: block;
    margin: 15px auto 0 auto;
}

.modal .modal-textos img:hover{
    transform: rotate(360deg) scale(1.2);

}
<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" class="img-modal" >
                           <div class="capa">
                               <h3><img src="img/lupa2.png" ></h3>
                                <p data-url="noticias.php">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" class="img-modal" >
                           <div class="capa">
                               <h3><img src="img/lupa2.png" alt="" width='300px'></h3>
                                <p data-url="realidad.php">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" class="img-modal" >
                           <div class="capa">
                               <h3><img src="img/lupa2.png" alt=""></h3>
                                <p data-url="artistas.php">Artistas Web</p>
                           </div>
                       </div>
                   </div>
                </div>
            </div>

        <div class="modal-container" id="modal-container">
                <div class="modal modal-close">
                    <p class="close">X</p>
                    <img src="" class="img-container">
                    <div class="modal-textos">
                        <h2>Título modal</h2>
                        <a href="https://www.google.com/" target="_blank">
                            <img src="img/brujula-direccional.svg" alt="">
                        </a>
                    </div>
                </div>
            </div>
</section>

1

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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