Skip to main content
2 de 2
se añadieron 45 caracteres en el cuerpo
Layer
  • 6.1k
  • 2
  • 11
  • 32

Mostrar Imagen en Modal con JavaScript

tengo un problema, resulta que estoy aprendiendo javaScript, entonces cree una pagina web de tortas (Solo para mi), y cuando le hacen click a la imagen de algunas de las tortas, aparece su información que proviene de la base de datos, eso está todo funcionando bien, pero el único problema que tengo, es que no me muestra la imagen a la cual se le hace click, no muestra la imagen y no se como hacerlo, por sus ayudas, muchas gracias.

<?php               
                        include './controller/productoController.php';
                        $data = productoController::listarImagenes();          
                    ?>
                </div>
            </div>           
            <!--Creamos las filas-->
            <div class="row">
                <!--En cada filas, crearemos columnas-->
                <!--col-12 col-md-6 col-lg-4 mb-4, -->
                <?php
                    foreach($data as $key){
                ?>
                <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
                     <a href="#" data-toggle="modal" onclick="mostrarTorta(this.parentElement);" data-target="#ventanaModal">
                    <div class="card">
                            <img src="<?php echo $key['ruta_imagen']; ?>" class='modal-img' height='255px'/>
                        <div class="card-body">
                            <div class="badges">
                                <span class="badge badge-warning modal-nombre"><?php echo $key['nombreProducto']; ?></span>                   
                            </div>
                            <div class="badges">
                                <span class="badge badge-success modal-cantidad">Cantidad: <?php echo $key['cantidadProducto']; ?></span>
                            </div>
                        </div>
                    </div>
                    </a>
                </div>
                <?php
                    }
                ?> 
                </div>
            </div> 
        <!-- Modal -->
        <div id="ventanaModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-contenido">
                    <h2 class="pt-1 modal-nombre"></h2>                  
                    <p class="modal-cantidad"></p>
                    <img class="modal-img" height="145px" width="100%">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
        <!--Fin Modal-->        
<!--Código que estoy utilizando-->
<script language="javascript">
function mostrarTorta(contenedor){
   
    var modal = document.getElementById('ventanaModal');
   
    // Cliente
    modal.getElementsByClassName('modal-nombre')[0].innerText = contenedor.getElementsByClassName('modal-nombre')[0].innerText;
    
    //Acá es donde tengo el problema (Imagen).
    modal.getElementsByClassName('modal-img')[0] = contenedor.getElementsByClassName("modal-img")[0];
    
    console.log(modal.getElementsByClassName('modal-img')[0] = contenedor.getElementsByClassName("modal-img")[0]);
    debugger;
    //modal.getElementsByClassName('modal-cantidad')[0].innerHTML = contenedor.getElementsByClassName('modal-cantidad')[0].innerHTML;
    // Descripcion   

    //$('#ventanaModal').modal('hide'); // cerrar
}
</script>
<!---->
plask
  • 23
  • 4