2

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');
    });
2
  • Eso sucede por qué hay varios popUp con el mismo ID, y los ID no se pueden repetir o duplicar. En un DOM o HTML debe haber un solo ID (btn-abrir-popup) para este caso Commented el 9 mar. 2022 a las 5:47
  • Ok muchas gracias!!
    – Luis Yela
    Commented el 9 mar. 2022 a las 18:24

1 respuesta 1

1

Es que cuando usas getElementById siempre te regresa solo uno aunque tengas muchos y como ya todos tienen clase entonces puedes agarrarlos con getElementsByClassName y vas a tener que usar un for para ponerles evento a cada uno

Pero antes fíjate en esta línea

<img class="producto_img" src="/Imagen/Img03.png" id="btn-abrir-popup" class="btn-abrir-popup">

Tienes dos veces class="aquí la clase" y la segunda no la estaría tomando, con lo cual debes poner las dos juntas class="clase1 clase2" y así si las va a reconocer

Otra cosa es que cada popup debe estar dentro del mismo grupo del producto,para que puedas saber cual es la que se tiene que abrir, para lo cual usé parentNode para llegar al div y otro parentNode para llegar al article

Y pues para los botones de cerrar es lo mismo y yo creo que ya viendo los cambios en el codigo lo vas a poder entender... pero si no, pues pregunta en los comentarios

var btnAbrir = document.getElementsByClassName('btn-abrir-popup')
var btnCerrar = document.getElementsByClassName('btn-cerrar-popup')

for(var i = 0; i < btnAbrir.length; i++){
    btnAbrir[i].addEventListener('click', function(event) {
        var producto = event.target.parentNode.parentNode
        producto.getElementsByClassName('overlay')[0].classList.add('active')
        producto.getElementsByClassName('popup')[0].classList.add('active')
    })
}

for(var i = 0; i < btnCerrar.length; i++) {
    btnCerrar[i].addEventListener('click', function(event){
        var overlay = event.target.parentNode.parentNode;
        overlay.classList.remove('active');
        overlay.getElementsByClassName('popup')[0].classList.remove('active')
    })
}
* {
    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;
}
    <article class="tienda">
        <div class="producto">              
            <img class="producto_img btn-abrir-popup" src="/Imagen/Img03.png" id="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>
    <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>cerrar</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>


    <article class="tienda">
        <div class="producto">              
            <img class="producto_img btn-abrir-popup" src="/Imagen/Img04.png" id="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>
    <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>cerrar</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>

    </article>

1
  • Ok, muchas gracias! deja hago los cambios!! Saludos!!
    – Luis Yela
    Commented el 9 mar. 2022 a las 18:24

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.