Este es todo el código html, css y javascript que estoy usando.
No le encuentro el error por ningún lado. En la primera foto todo iba bien, la tocaba y salía el popup ya terminado viendo las medidas y todo listo. Solo hice un copiar/pegar, cambié las imágenes y no funciono.
Estoy empezando en esto y me cuesta mucho encontrar los errores.
HTML
<div class="contenedor">
<article class="tienda">
<div class="producto">
<img class="producto_img" src="/Imagen/Img03.png" id="btn-abrir-popup" class="btn-abrir-popup">
<br>
<div class="producto_titulo">
<h2 class="titulo">Gel para rasurar</h2>
</div>
<p class="producto_parrafo"><strong>Veruska</strong><br><i>Toque la imagen para descripcion completa</i></p>
</div>
</article>
<div class="overlay" id="overlay">
<div class="popup" id="popup">
<a href="#" id="btn-cerrar-popup" class="btn-cerrar-popup"><i class="fas fa-times"></i></a>
<h3>CREMAS</h3>
<h4>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi voluptatum aliquam veniam nisi,
necessitatibus dolorem?</h4>
<form action="">
<div class="contenedor-inputs">
<img src="/Imagen/Img03.png" alt="" class="popup__img">
</div>
<input type="submit" class="btn-submit" value="Cerrar">
</form>
</div>
</div>
<article class="tienda">
<div class="producto">
<img class="producto_img" src="/Imagen/Img04.png" id="btn-abrir-popup" class="btn-abrir-popup">
<br>
<div class="producto_titulo">
<h2 class="titulo">Gel para rasurar</h2>
</div>
<p class="producto_parrafo"><strong>Veruska</strong><br><i>Toque la imagen para descripcion completa</i></p>
</div>
</article>
<div class="overlay" id="overlay">
<div class="popup" id="popup">
<a href="#" id="btn-cerrar-popup" class="btn-cerrar-popup"><i class="fas fa-times"></i></a>
<h3>CREMAS</h3>
<h4>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi voluptatum aliquam veniam nisi,
necessitatibus dolorem?</h4>
<form action="">
<div class="contenedor-inputs">
<img src="/Imagen/Img04.png" alt="" class="popup__img">
</div>
<input type="submit" class="btn-submit" value="Cerrar">
</form>
</div>
</div>
CSS
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
body {box-sizing: border-box;
background: #000;
font-family: 'Open Sans', sans-serif;
}
header{
/* outline: 1px solid blue; */
height: 60px;
margin-bottom: 25px;
/* margin: 5px 10px 25px 5px; */
}
.menu{
/* outline: 1px solid red; */
/* background: #1f1f1f; */
display: flex;
position: relative;
width: 95%;
height: 60px;
justify-content: space-between;
margin: 5px 25px 25px;
}
.menu__cta{
/* outline: 1px solid green; */
background-color: #7a0015;
color: #fff;
text-decoration: none;
height: 35px;
font-size: 1rem;
text-align: center;
padding: 6px 16px;
border-radius: 30px;
font-weight: 600;
box-shadow: 0 0 1px;
margin: 10px 0;
margin-top: 25px;
}
.menu__logo{
/* background-color: #fff; */
width: 120px;
height: 60px;
margin: 10px 0;
/* outline: 1px solid yellow; */
}
.tienda{
outline: 1px solid #fff;
display: flex;
width: 100%;
max-width: 980px;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
margin: 0 auto;
}
.producto{
flex-direction: row;
/* align-content: center; */
/* justify-content: center; */
/* flex-wrap: nowrap; */
outline: 1px solid rgb(4, 197, 231);
width: 155px;
max-width: 200px;
height: 350px;
/* text-align: center; */
padding-bottom: 35px;
margin: 0 auto;
}
.producto_img{
outline: 1px solid rgb(10, 235, 243);
background-color: #fff;
width: 100%;
max-width: 200px;
height: 200px;
border-radius: 15px;
box-shadow: 3px 3px 3px #7a0015;
margin: 0 auto;
/* align-content: center; */
}
.producto_titulo{
outline: 2px solid rgb(31, 7, 243);
font-size: 1rem;
width: 90%;
text-align: center;
color: chocolate;
/* position: relative; */
margin: 0 auto;
margin-top: -120px;
background-color: #7a001469;
/*width: auto;
text-align: center;
align-items: center;
align-content: center;
font-size: 1rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6); */
}
.producto_parrafo{
outline: 1px solid rgb(245, 140, 2);
color: #fff;
font-size: .8rem;
text-align: center;
padding: 5px;
margin-top: 80px;
background-color: #7a0015;
/* border-radius: 10px; */
box-shadow: 3px 3px 10px #fff;
}
.contenedor {
display: flex;
outline: 2px solid green;
width: 100%;
max-width: 980px;
flex-wrap: wrap;
justify-content: space-between;
margin: 0px auto;
/* background-color: #5E7DE3; */
}
.contenedor article {
width: 200px;
outline: 2px solid yellow;
line-height: 28px;
}
.contenedor article h1 {
font-size: 30px;
text-align: left;
padding: 50px 0;
}
.contenedor article p {
margin-bottom: 20px;
}
.contenedor article .btn-abrir-popup {
padding: 0 20px;
margin-bottom: 20px;
width: 100%;
height: 100%;
line-height: 40px;
border: none;
color: #fff;
/* background: #5E7DE3; */
border-radius: 3px;
/* font-family: 'Montserrat', sans-serif;
font-size: 16px; */
cursor: pointer;
transition: .3s ease all;
cursor: pointer;
}
/* .contenedor article .btn-abrir-popup:hover {
background: #ce0224;
} */
/* ------------------------- */
/* POPUP */
/* ------------------------- */
.overlay {
background: rgba(0,0,0,.3);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
justify-content: center;
display: flex;
visibility: hidden;
}
.overlay.active {
visibility: visible;
}
.popup {
background: #F8F8F8;
box-shadow: 5px 5px 10px #7a0015;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
padding: 20px;
text-align: center;
width: 300px;
transition: .3s ease all;
transform: scale(0.7);
opacity: 0;
}
.popup .btn-cerrar-popup {
font-size: 16px;
line-height: 16px;
display: block;
text-align: right;
transition: .3s ease all;
color: #7a0015;
}
.popup .btn-cerrar-popup:hover {
color: #000;
z-index: 10;
}
.popup__img{
width: 200px;
background-color: #fff;
box-shadow: 5px 5px 10px #7a0015;
}
.popup form .contenedor-inputs {
opacity: 0;
}
.popup form .contenedor-inputs input {
width: 100%;
margin-bottom: 20px;
height: 52px;
font-size: 18px;
line-height: 52px;
text-align: center;
border: 1px solid #BBBBBB;
}
.popup form .btn-submit {
padding: 0 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #7a0015;
border-radius: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
margin-top: 15px;
}
.popup form .btn-submit:hover {
background: rgba(190, 3, 43, 0.9);
}
/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active { transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }
@keyframes entradaTitulo {
from {
opacity: 0;
transform: translateY(-25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes entradaSubtitulo {
from {
opacity: 0;
transform: translateY(25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes entradaInputs {
from { opacity: 0; }
to { opacity: 1; }
}
.btn-abrir-popup {
width: 600px;
height: 400px;
border-radius: 3px;
cursor: pointer;
}
javascript
var btnAbrirPopup = document.getElementById('btn-abrir-popup'),
overlay = document.getElementById('overlay'),
popup = document.getElementById('popup'),
btnCerrarPopup = document.getElementById('btn-cerrar-popup');
btnAbrirPopup.addEventListener('click', function(){
overlay.classList.add('active');
popup.classList.add('active');
});
btnCerrarPopup.addEventListener('click', function(e){
e.preventDefault();
overlay.classList.remove('active');
popup.classList.remove('active');
});