1

Hola estoy practicando con los bucles y tengo un problemas sobre unas imagenes que quiero que me salga a la hora de darle click a los modal, se trata de que las imagenes que quiero poner en cada contenedor salga la misma foto en el fondo de modal usando data-* este es el codigo

<div class="item" data-imagen="/img/IMG_0008.JPG">
            <div class="titulo">
                <button type="button" id="btnModal">modal </button>
            </div>
            <div id="tvesModal" class="modalContainer imgfondo">
                <div class="modal-content">
                    <span class="close">x</span>
                    <h2>modal</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum voluptatem qui, nostrum dolorem maiores est? Odio ipsa numquam totam earum laudantium obcaecati? Explicabo, quis blanditiis?
                    </p>
                </div>
            </div>
        </div>
        <div class="item" data-imagen="/img/IMG_0006.JPG">
            <div class="titulo">
                <button type="button" id="btnModal">modal </button>
            </div>
            <div id="tvesModal" class="modalContainer imgfondo">
                <div class="modal-content">
                    <span class="close">x</span>
                    <h2>modal</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum voluptatem qui, nostrum dolorem maiores est? Odio ipsa numquam totam earum laudantium obcaecati? Explicabo, quis blanditiis?
                    </p>
                </div>
            </div>
        </div>

for (i = 0; i < item.length; i++) {
        var dataImg = item[i].dataset;
        var laimagen = [dataImg.imagen];
        item[i].style.backgroundImage = `url(${laimagen})`;

        console.log('entro en el bucle ' + i);
        var fondoimg = document.querySelector('.imgfondo');
        fondoimg.style.backgroundImage = `url(${laimagen})`;
        console.log(fondoimg);
    }

en la que los data-imagen es la dirección de las imagenes que esta para generar el bucle for y aumentar las veces necesaria que necesites. Desde hay funciona corectamente el problema que tengo es que cuando le doy click a los modal esa misma imagen quiero que salga en el fondo del contenedor no me sale y solo sale el primero...

sengun en la consola del navegador me sale la imagenes pero a la hora de darle click a los modal me sale solo el primer imagenes .

5
  • Por que .imgfondo está dos veces, es por eso que aplica la imagen dos veces. Y ojo que tienes duplicado un id tvesModal y puede que te genere algun error a posterior.
    – Roy Bogado
    Commented el 3 dic. 2019 a las 13:04
  • Y como se solucionaría @Roy , llamando al id tvsModal
    – Janpweb
    Commented el 3 dic. 2019 a las 13:35
  • deberias de buscar document.querySelector('.imgfondo') pero del item[i] que correspone a cada vuelta del for.
    – Roy Bogado
    Commented el 3 dic. 2019 a las 14:12
  • @Roy he visto un problemas con los modal que solo me habre el primero y no los siguientes , haber si busco solucion en eso y quizar se pueda arreglar y pongo lo que he echo para compartirlo en la comunidad. si alguno tiene algun aporte para hacer un modal en javascript individual os lo agradeceria
    – Janpweb
    Commented el 3 dic. 2019 a las 15:48
  • El tema está acá. var fondoimg = document.querySelector('.imgfondo');. Estás capturando todas las .imgfondo, cuando deberias de hacer var fondoimg = item[i].querySelector('.imgfondo');, pruebalo y me dices!
    – Roy Bogado
    Commented el 3 dic. 2019 a las 15:54

2 respuestas 2

1

Respecto a lo que hablábamos ayer... yo separaría los dos modal pues al hacerlo dentro de un for no vas a hacer el codigo mas organizado.. vas a hacerlo menos organizado y mas ineficiente pues siempre estarias abriendo modal[0] modal[1] en caso de querer abrir el modal[0] y reabrirlo abririas primero el modal[1] y no se ejecutaría mas por el fin del for... simplemente haces lo mismo para el segundo(un eventlistener en su boton y utilizas las clases css) cambiando lo que te interesa o simplemente las reutilizas.. luego la imagen la llamaría en la funcion de callback del eventlistener del botón que le corresponde.. si fuera una imagen que se inserta dinamicamente pudieras complicarte un poco y hacerlo por nodo padre del nodo padre pero asi no se... a lo mejor es que tienes pensado otra cosa luego

//elemento del modal
    var modal = document.getElementById('tvesModal')
    //btn del primer modal
    var btn = document.getElementById('btnModal');
    //boton que cierra el modal numero uno
    var span = document.getElementsByClassName('close')[0]; // aqui le dices que es el cierre del primer modal

    btn.onclick = function () {
        modal.style.display = "block";
        /*yo pondria el codigo de la imagen aqui se quita automaticamente al salir del modal y puedes mantener tu clase css para otro modal */
        modal.style.backgroundImage = "url('img/razer.png')";/* OJO en la sintaxis img es mi carpeta luego el nombre.. asi me esta funcionando*/
    }


    span.onclick = function () {
        modal.style.display = "none"
    }

    window.onclick = function () {
        if (event.target == modal) {
            modal.style.display = "none"
        }
    }
.modalContainer{
    display: none; /*para que no se vea al inicio*/
    position: fixed; 
    /* estas son para hacer la capa opaca a pantalla completa*/
    left: 0; 
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    /*aqui puedes poner la imagen*/ 
    
}

.modal-content{
    /* aqui esta la parte del estilo del modal*/
    background-color: #fff;
    /*centrando el modal*/
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

/*Efecto del boton de cerrado*/
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
<div class="titulo">
        <!-- boton modal 1 -->
        <button type="button" id="btnModal">modal </button>
    </div>

    <!-- modal -->
    <div id="tvesModal" class="modalContainer imgfondo">

        <!-- contenido modal-->
        <div class="modal-content">
            <span class="close">x</span>
            <h2>Modal numero 1</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum voluptatem qui, nostrum dolorem maiores
                est? Odio ipsa numquam totam earum laudantium obcaecati? Explicabo, quis blanditiis?
            </p>
        </div>
    </div>
    </div>


    <div class="item" data-imagen="/img/razer.">

        <div class="titulo">
            <button type="button" id="btnModal2">modal </button>
        </div>
        <div id="tvesModal" class="modalContainer imgfondo">
            <div class="modal-content">
                <span class="close">x</span>
                <h2>modal</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum voluptatem qui, nostrum dolorem
                    maiores est? Odio ipsa numquam totam earum laudantium obcaecati? Explicabo, quis blanditiis?
                </p>
            </div>
        </div>
    </div>

Ahi esta funcionando el modal 1 con una imagen de fondo.. saludos

1
  • hola he probado algo parecido en la que tu me has dicho, lo he echo de otra menera y funciona perfectamente, ahora estoy mirando para que la imagen del contenedor salga en el fondo del modal , lo estoy estudiando si se algo lo aportaré como se ha quedado. gracias
    – Janpweb
    Commented el 4 dic. 2019 a las 14:57
1

hola de darle a la cabeza una semana estaba haciendo unos modal sin usar libreria externa con javascript puro. No se si es una buena practica o no pero si teneis algun comentario o observaciones para mejorar el codigo mejor. Os dejo el codigo , se trata de tres modal que cada modal tiene una imagen contenedor y esa imagen en el fondo de los modal.

window.addEventListener('load', function() {
    /*clase de cierre*/
    var span = document.getElementsByClassName('close');
    var body = document.getElementsByTagName('body')[0];
    /**los lod modal  ha ejecutar */
    var modal = document.querySelectorAll('#modal');
    /**los botones a ejecutar */
    var btn = document.querySelectorAll('#btnModal');

    var btnArry = Array.prototype.slice.call(btn, 0);

    var item = document.querySelectorAll('.item');


    var fondoimg = document.querySelectorAll('.imgfondo');
    console.log(fondoimg);


    for (var a = 0; a < btnArry.length && a < modal.length && a < span.length && a < item.length; a++) {
        var dataImg = item[a].dataset;
        var laimagen = [dataImg.imagen];
        //aqui recorro todo las imagenes  que se pone en data-*   
        item[a].style.backgroundImage = `url(${laimagen})`;

        console.log(fondoimg[a].style.backgroundImage = `url(${laimagen})`);


        /**modal 1 */
        btnArry[0].onclick = function() {
                modal[0].style.display = 'flex';
                body.style.position = 'static';
                body.style.height = '100%';
                body.style.overflow = 'hidden';
                fondoimg[0];
                span[0].onclick = function() {
                    console.log('le has cerrado el primero');
                    modal[0].style.display = "none";
                    body.style.position = "inherit";
                    body.style.height = 'auto';
                    body.style.overflow = 'visible';
                }
            }
            /**modal 2 */
        btnArry[1].onclick = function() {
                modal[1].style.display = 'flex';
                body.style.position = 'static';
                body.style.height = '100%';
                body.style.overflow = 'hidden';
                fondoimg[1];
                span[1].onclick = function() {
                    console.log('le has cerrado el primero');
                    modal[1].style.display = "none";
                    body.style.position = "inherit";
                    body.style.height = 'auto';
                    body.style.overflow = 'visible';
                }
            }
            /**modal3 */
        btnArry[2].onclick = function() {
            modal[2].style.display = 'flex';
            body.style.position = 'static';
            body.style.height = '100%';
            body.style.overflow = 'hidden';
            fondoimg[2];
            span[2].onclick = function() {
                console.log('le has cerrado el tercero');
                modal[2].style.display = "none";
                body.style.position = "inherit";
                body.style.height = 'auto';
                body.style.overflow = 'visible';
            }
        }
        window.onclick = function() {
            console.log('le has dado click la ventana');
            if (event.target == modal[a]) {
                modal[a].style.display = "none";
                body.style.position = "inherit";
                body.style.height = 'auto';
                body.style.overflow = 'visible';
            }
        }
    }
});
* {
    padding: 0;
    margin: 0;
}

.maquetacion {
    position: relative;
    display: grid;
    width: 90%;
    height: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 325px);
    grid-auto-flow: row;
    gap: 10px;
    margin: auto;
}

.item {
    background-color: cornflowerblue;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.titulo {
    display: block;
    position: relative;
}

.titulo>button {
    box-sizing: border-box;
    border: transparent;
    background: linear-gradient(130deg, #fd9482, #ffda8b, #fd9482);
    background-size: 200% 200%;
    width: 150PX;
    height: 45px;
    cursor: pointer;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.titulo>button:hover {
    animation: color 700ms ease-in;
    -webkit-animation: color 700ms ease-in;
}

@keyframes color {
    0% {
        background-position: 10% 0%;
    }
    50% {
        background-position: 91% 100%;
    }
    100% {
        background-position: 10% 0%;
    }
}

.modalContainer {
    background-color: rgba(17, 51, 63, 0.568);
    display: none;
    position: fixed;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.imgfondo {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.modalContainer .modal-content {
    border: 2px solid black;
    margin: auto;
    padding: 20px;
    background: blanchedalmond;
    width: 50%;
}

.modalContainer .close {
    color: #8a858531;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.modalContainer .close:hover,
.modalContainer .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 650px) {
    .maquetacion {
        top: 10px;
        width: 90%;
        height: 100%;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, 150px);
    }
    .titulo>button {
        width: 100PX;
        height: 30px;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MAQUETACION01</title>
    <link rel="stylesheet" type="text/css" href="/css/estilo.css">

</head>

<body>
    <div class="maquetacion">
        <div class="item" data-imagen="/img/IMG_0008.JPG">
            <div class="titulo">
                <button type="button" id="btnModal">modal </button>
            </div>
            <div id="modal" class="modalContainer imgfondo">
                <div class="modal-content">
                    <span class="close">x</span>
                    <h2>modal 1 </h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum voluptatem qui, nostrum dolorem maiores est? Odio ipsa numquam totam earum laudantium obcaecati? Explicabo, quis blanditiis?
                    </p>
                </div>
            </div>
        </div>
        <div class="item" data-imagen="/img/IMG_0006.JPG">
            <div class="titulo">
                <button type="button" id="btnModal">modal02 </button>
            </div>
            <div id="modal" class="modalContainer imgfondo">
                <div class="modal-content">
                    <span class="close">x</span>
                    <h2>modal 2 </h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum voluptatem qui, nostrum dolorem maiores est? Odio ipsa numquam totam earum laudantium obcaecati? Explicabo, quis blanditiis?
                    </p>
                </div>
            </div>
        </div>
        <div class="item" data-imagen="/img/IMG_0010.JPG">
            <div class="titulo">
                <button type="button" id="btnModal">modal </button>
            </div>
            <div id="modal" class="modalContainer imgfondo">
                <div class="modal-content">
                    <span class="close">x</span>
                    <h2>modal 1 </h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum voluptatem qui, nostrum dolorem maiores est? Odio ipsa numquam totam earum laudantium obcaecati? Explicabo, quis blanditiis?
                    </p>
                </div>
            </div>
        </div>



    </div>
</body>
<script type="text/javascript" src="js/main.js"></script>


</html>

2
  • 1
    hola Janpweb conseguistes lo que querias... has probado que pasa si sacas del for los eventListeners??
    – RazerJs
    Commented el 8 dic. 2019 a las 14:13
  • hola RazerJs si que lo he probado pero el problemas es que la clase close me sale las clases diferentes es decir tengo que coger hacer otra classe por cada close
    – Janpweb
    Commented el 9 dic. 2019 a las 19:19

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.