0

Me gustaría hacer uso de las ventanas emergentes o modal-dialog de bootstrap para mostrar una imagen ya que las encuentro muy sencillas.

La idea es tener una serie de imágenes que imprimo en pantalla que se encuentran en una base de datos y al hacer clic sobre alguna de ellas que me la visualice en la ventana emergente. A su vez esta ventana emergente tendrá un botón comprar que me añade a un carrito de la compra cada imagen/producto La imagen me la muestra, pero no la ventana emergente. Es como si no me identificase el id del div con class modal-fade con el href del enlace.

Os dejo el código:

while($fila = $resultado->fetch_array()){ 
               echo"<form action='".$_SERVER['PHP_SELF']."' method='post'>";    

echo '
    <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">
        <a href="#'.$fila["nombre"].'" data-toggle="modal"><img src="'.$fila["imagen"].'" class="img-responsive" width="600" height="600"></a>

       <div class="modal fade" id="'.$fila["nombre"].'">
                    <div class="modal-dialog">
                        <div class="modal-content">


                            <div class="modal-header">
                                <button tyle="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title"> '.$fila["nombre"].'</h4>
                            </div>



                            <div class="modal-body">

                                <img src="img/braga.png" class="img-responsive" width="700" height="700">

                            </div>


                            <div class="modal-footer">
                                <p class="texto">100x230</p>


    <button type="submit" name="anadir" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> comprar</button>


                            </div>
                        </div>
                    </div>
                </div>
</form>';

}

1 respuesta 1

1

Lo pude resolver. Lo único que hice fue sacar el div de las columnas fuera del while:

<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">
<?php
    while($fila = $resultado->fetch_array()) {
        echo"<form action='carrito.php' method='post'>";    
        echo '
            <a href="#'.$fila['codigo'].'" data-toggle="modal"><img src="'.$fila["imagen"].'" class="img-responsive" width="600" height="600"></a>
            <div class="modal fade" id="'.$fila['codigo'].'">
                <div class="modal-dialog">
                    <div class="modal-content">
                    <!-- encabezado de la ventana1-->

                        <div class="modal-header">
                            <button tyle="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title"> '.$fila["nombre"].'</h4>
                        </div>
                    <!-- contenido de la ventana1-->
                        <div class="modal-body">
                            <center><img src="'.$fila["imagen"].'" class="img-responsive" width="700" height="700"></center>
                        </div>
                    <!-- pie de la ventana1-->
                    <div class="modal-footer">
                        <p class="texto">100x230</p>
                             <button type="submit" name="anadir" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>Comprar</button>
                    </div>
                </div>
            </form> 
        </div>
    </div>
    ';
}
?>
</div>

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.