1

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:

  1. a la hora de darle click a la 2da card no me muestra la ventana emergente solo se actualiza
  2. 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>

1 respuesta 1

1

El error es que estás repitiendo ID y estos deben ser únicos, lee la documentación en caso de que tengas dudas.

  1. Remplaza ID por clases y obtén todos los elementos con querySelectorAll()
  2. Recorre cada elemento para asignar el evento
  3. Crea una sola función para abrir y cerrar cada modal, toda la información necesaria está en el evento que se recibe como parámetro. Revisa los comentarios para saber qué se hace en cada paso

// Ejecutar hasta que cargue el documento
document.addEventListener('DOMContentLoaded', () => {
    // Obtener todos los enlaces para abrir y cerrar modal
    const open = document.querySelectorAll('.open');
    const close = document.querySelectorAll('.close');
    // Recorrer para asignar evento, con una sola función
    open.forEach(item => item.addEventListener('click', modalToggle));
    close.forEach(item => item.addEventListener('click', modalToggle));
});

// Abrir o cerrar modal, el evento se recibe como parámetro
function modalToggle(e) {
    // Cancelar comportamiento normal del enlace
    e.preventDefault();
    // Obtener modal desde el elemento que disparó el evento
    // closest() busca el padre por clase
    // Desde el padre se obtiene la modal por clase
    let modal = e.target.closest('.Pbtn').querySelector('.modal-container');
    // Simplemente se agrega o elimina la clase para mostrar u ocultar
    modal.classList.toggle('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 {
    cursor:pointer;
    background:#fff;
    z-index:50;
}



/*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 open">certificado</a>
                    <div class="modal-container">
                        <div class="modal">
                            <p class="close">X</p>
                            <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 open">certificado</a>
                    <div class="modal-container">
                        <div class="modal">
                            <p class="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 open">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 open">certificado</a>
                    <div id="modal_container" class="modal-container">
                        <div class="modal">
                            <p class="close">X</p>
                            <img src=https://chsakell.files.wordpress.com/2016/06/angular-io-logo.png alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>

1
  • intentare gracias
    – NoRcK VR
    Commented el 10 feb. 2021 a las 19:15

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.