Pregunta:
Fecha: 20-03-2019 20:19:06
(En Español)
codigo no muestra el modal.[Resuelta]
Hola amigos mi problema es que el siguiente codigo no muestra el modal cuando presiono el boton.<div class="container bg-primary">
<h2 align="center">Galeria</h2>
<div align="center">
<button type="button" data-toggle="modal" data-target="#src_img_upload" class="btn btn-success">Subir archivos</button>
</div>
<br/>
</div>
<div id="image_gallery" class="col-md-10 mx-auto row">
<?php
$images = glob("../../Vistas/Img/*.*");
foreach($images as $image)
{
echo'<ul class="mx-auto" id="galeria">
<li>
<a href="#"><img src="' . $image .'" width="120px" height="120px"/></a>
</li>
</ul>';
}
?>
</div>
<div id="src_img_upload" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Subir multiples imágenes</h4>
</div>
<div class="modal-body">
<form method="POST" id="upload_form">
<label>Seleccion las imágenes</label>
<input type="file" name="images[]" id="img_select" multiple class='form-control'>
</form>
</div>
</div>
</div>
</div>
<script src="../js/upImg.js" ></script>
Votos: 0 -
Respuestas: 2 -
Vistas: 8
Compartir en: Google
Facebook
Twitter
LinkedIn
Link
Respuestas:
-
Fecha: 20-03-2019 20:52:45 Hola Mauricio
He probado tu codigo, he eliminado el codigo de PHP para probar si habia algun problema relacionado a Bootstrap.
Como tu codigo esta incompleto, no incluye la libreria de bootstrap que esta utilizando lo he probado sobre la version que utilizo actualmente.
bootstrap Version 3.3.7
Jquery Version 3.3.1
Esta bien tu codigo con respecto a Bootstrap, funciona el botón Subir Archivo muestra el modal
Te dejo el codigo que use para el test sin el bloque de codigo de PHP
<!DOCTYPE html> <html lang="es"> <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>Domuneto HTML</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container bg-primary"> <h2 align="center">Galeria</h2> <div align="center"> <button type="button" data-toggle="modal" data-target="#src_img_upload" class="btn btn-success">Subir archivos</button> </div> <br/> </div> <div id="image_gallery" class="col-md-10 mx-auto row"> Código PHP eliminado para testear el comportamiento de bootstrap </div> <div id="src_img_upload" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Subir multiples imágenes</h4> </div> <div class="modal-body"> <form method="POST" id="upload_form"> <label>Seleccion las imágenes</label> <input type="file" name="images[]" id="img_select" multiple class='form-control'> </form> </div> </div> </div> </div> </body> </html>
Aqui podrás ver su funcionamiento online. Click en el botón RUN
Incluyendo el codigo de PHP funciona sin problemas.
Solo he cambiado la ruta donde estan las imagenes, que en este caso es irrelevante
<!DOCTYPE html> <html lang="es"> <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>Domuneto HTML</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container bg-primary"> <h2 align="center">Galeria</h2> <div align="center"> <button type="button" data-toggle="modal" data-target="#src_img_upload" class="btn btn-success">Subir archivos</button> </div> <br/> </div> <div id="image_gallery" class="col-md-10 mx-auto row"> <?php $images = glob("img/*.*"); foreach($images as $image) { echo'<ul class="mx-auto" id="galeria"> <li> <a href="#"><img src="' . $image .'" width="120px" height="120px"/></a> </li> </ul>'; } ?> </div> <div id="src_img_upload" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Subir multiples imágenes</h4> </div> <div class="modal-body"> <form method="POST" id="upload_form"> <label>Seleccion las imágenes</label> <input type="file" name="images[]" id="img_select" multiple class='form-control'> </form> </div> </div> </div> </div> </body> </html>
Descarga del codigo de pruebas.
Haz una prueba en tu codigo elimina el código de PHP y prueba si funciona el modal.
También puedes probar mi codigo en tu equipo.
Saludos Votos: 2 - Link respuesta -
Fecha: 21-03-2019 10:04:03 Muchas gracias Walter, yo estoy utilizando bootswatch, pero también tengo instalado bootstrap 3.3.7
de igual forma, pensé que algo se me podía estar pasando en el código pero que bueno que me confirmas que esta bien, asi ya puedo enfocarme a buscar en otro lado el problema. inclusive puede deberse a bootswatch o que lo tenga mal linkiado.
gracias.. Votos: 0 - Link respuesta
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
