Lo que quiero lograr es mostrar una ventana emergente a la hora de darle click pero tengo varias cards y cada una tiene su respectiva imagen (en la ventana emergente) el problema es que ya logré que me muestre la primera ventana emergente muestre con su respectiva imagen pero el problema que tengo es que:
- a la hora de darle click a la 2da card no me muestra la ventana emergente solo se actualiza
- si quito el id del open y del close a la primera card y le doy click a la segunda card si me muestra la ventana emergente PERO no con respectiva imagen si no con la imagen de la primera card
NOTA el id="close"
NO LE HE DADO ESTILOS aunque sí funciona
window.onload = function() {
const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');
modalWindow(open, modal_container, close);
};
function modalWindow(open, modal_container, close) {
open.addEventListener('click', (e) => {
e.preventDefault();
modal_container.classList.add('show');
});
close.addEventListener('click', () => {
modal_container.classList.remove('show');
});
}
html {
font-size: 62.5%;
font-family: 'Bungee Hairline', cursive;
font-weight: bold;
background-color: rgb(44, 44, 44);
}
.btn {
padding: 0.5rem;
font-size: 1.5rem;
font-weight: 900;
border-radius: 0.5rem;
cursor: pointer;
text-align: center;
}
.btn-color {
background-color: #FE5F1E;
text-decoration: none;
color: #ffff;
border: 0.1rem solid #FE5F1E;
}
.btn:hover {
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.5s;
color: #FE5F1E;
font-weight: 600;
}
.anchoC {
width: 40rem;
height: 20rem;
}
h4 {
font-size: 2rem;
color: #ffff;
text-align: center;
margin: 0;
}
.gridC {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 5rem;
gap: 2rem;
}
.Pbtn {
margin: 2rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 1rem;
}
.lateralF {
width: 0.2rem;
height: 20vh;
background-color: #FE5F1E;
margin: 0 1rem 0 1rem;
}
.cajaC {
border: solid #FE5F1E 0.1rem;
border-radius: 1rem;
}
/*Modal*/
.modal-container {
display: flex;
background: rgba(0, 0, 0, 0.3);
align-items: center;
justify-content: center;
position: fixed;
z-index: 2;
pointer-events: none;
opacity: 0;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}
.show {
pointer-events: auto;
opacity: 1;
transition: 1s;
}
.modal {
width: 60%;
height: 80%;
background-color: #ffff;
max-width: 100%;
padding: 0;
border-radius: 1rem;
display: flex;
justify-content: center;
}
.modal-close {
transform: translateY(-200%);
}
.close {
z-index: 5;
}
/*Cursos*/
.master {
background-image: url(https://i.ytimg.com/vi/Xge7V6Uj5lk/maxresdefault.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: rgba(0, 0, 0, 0.6);
background-blend-mode: soft-light;
border-radius: 1rem 1rem 0 0;
}
.full-stack {
background-image: url(https://th.bing.com/th/id/OIP.sshBWi4WaoeoAn1oMAqV1wHaD4?pid=Api&rs=1);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: rgba(0, 0, 0, 0.6);
background-blend-mode: soft-light;
border-radius: 1rem 1rem 0 0;
}
.firebaseM {
background-image: url(https://www.redvirtual.bid/wp-content/uploads/2018/10/firebase-640x330.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: rgba(0, 0, 0, 0.6);
background-blend-mode: soft-light;
border-radius: 1rem 1rem 0 0;
}
.angularM {
background-image: url(https://chsakell.files.wordpress.com/2016/06/angular-io-logo.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: rgba(0, 0, 0, 0.6);
background-blend-mode: soft-light;
border-radius: 1rem 1rem 0 0;
}
<div class="gridC ">
<div class=" cajaC">
<div src="" alt="" class="master anchoC">
<h4>Master en PHP, SQL, POO, MVC, Laravel, Symfony, WordPress +</h4>
</div>
<div class="Pbtn">
<a href="" class="btn btn-color">Ver curso</a>
<a href="" class="btn btn-color" id="open">certificado</a>\
<div id="modal_container" class="modal-container">
<div class="modal">
<img src="" class="close" id="close">
<img src=https://i.ytimg.com/vi/Xge7V6Uj5lk/maxresdefault.jpg alt="">
</div>
</div>
</div>
</div>
<div class="cajaC ">
<div src="" alt="" class="full-stack anchoC">
<h4>The Complete 2020 PHP Full Stack Web Developer Bootcamp</h4>
</div>
<div class="Pbtn">
<a href="" class="btn btn-color">Ver curso</a>
<a href="" class="btn btn-color" id="open">certificado</a>\
<div id="modal_container" class="modal-container">
<div class="modal">
<p id="close">X</p>
<img src=https://th.bing.com/th/id/OIP.sshBWi4WaoeoAn1oMAqV1wHaD4?pid=Api&rs=1 alt="">
</div>
</div>
</div>
</div>
<div class=" cajaC">
<div src="" alt="" class="firebaseM anchoC">
<h4>Firebase en la web:Usa servicios de backend desde Javascript</h4>
</div>
<div class="Pbtn">
<a href="" class="btn btn-color">Ver curso</a>
<a href="" class="btn btn-color" id="open3">certificado</a>\
<div id="modal_container" class="modal-container">
<div class="modal">
<p id="close">X</p>
<img src=https://www.redvirtual.bid/wp-content/uploads/2018/10/firebase-640x330.jpg alt="">
</div>
</div>
</div>
</div>
<div class=" cajaC">
<div src="" alt="" class="angularM anchoC">
<h4>La Web Empieza Aquí: TypeScript, Angular , Storage, Firebase</h4>
</div>
<div class="Pbtn">
<a href="" class="btn btn-color">Ver curso</a>
<a href="" class="btn btn-color" id="open3">certificado</a>\
<div id="modal_container" class="modal-container">
<div class="modal">
<p id="close">X</p>
<img src=https://chsakell.files.wordpress.com/2016/06/angular-io-logo.png alt="">
</div>
</div>
</div>
</div>
</div>