modal bootstrap dialog with data from a php query

0

I would like to use the pop-up windows or bootstrap modal-dialog to show an image because I find them very simple.

The idea is to have a series of images that I print on the screen that are in a database and when I click on any of them I can see it in the pop-up window. In turn, this popup window will have a buy button that adds me to a shopping cart every image / product. The image shows it to me, but not the pop-up window. It's as if I did not identify the id of the div with class modal-fade with the href of the link.

I leave the code:

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>';

}
    
asked by Marta Platón 05.04.2016 в 17:11
source

1 answer

1

I could solve it. The only thing I did was to take the div out of the columns outside the 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>
    
answered by 05.04.2016 в 18:09