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 div
me 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>
data-url="pagina.php"
, diferente para cada uno. Después, lo obtienes contitulo.dataset.url
y asignas ese valor alhref
del enlace.