Foros del Web » Programando para Internet » Javascript »

Problema con bootstrap carrousel modal, no se cierra al hacer click fuera del modal

Estas en el tema de Problema con bootstrap carrousel modal, no se cierra al hacer click fuera del modal en el foro de Javascript en Foros del Web. Hola como estais, Vereis tengo una ventana modal y dentro un carrousel de Bootstrap y funciona bien a excepción de que cuando quiero cerrar si ...
  #1 (permalink)  
Antiguo 30/09/2015, 15:24
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 9 meses
Puntos: 4
Problema con bootstrap carrousel modal, no se cierra al hacer click fuera del modal

Hola como estais,

Vereis tengo una ventana modal y dentro un carrousel de Bootstrap y funciona bien a excepción de que cuando quiero cerrar si le doy al botón se cierra correctamente pero si doy en cualquier parte de la pantalla no se cierra y me gustaría que lo hiciese.

Este es el código:


Código HTML:
Ver original
  1. <div class="modal fade" id="myModal'.$count_valoracion.'" tabindex="-1" data-keyboard="true" data-backdrop="static" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"  style="display:none;">
  2.                         <div class="modal-dialog">
  3.                             <div class="modal-content">
  4.                                 <div class="modal-header">
  5.                                    
  6.                                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  7.                                    
  8.                                     <h4 class="modal-title">'.utf8_encode($array_valorados['articulo']).'</h4>
  9.  
  10.                                 </div>
  11.  
  12.                                     <div class="modal-body">
  13.                                        
  14.  
  15.                                         <div id="myCarousel'.$count_valoracion.'" class="carousel slide" data-ride="carousel"  data-interval="false">
  16.                                             <!-- Indicators -->
  17.                                             <ol class="carousel-indicators">
  18.                                             <li data-target="#myCarousel'.$count_valoracion.'" data-slide-to="0" class="active"></li>
  19.                                             <!--<li data-target="#myCarousel'.$count_valoracion.'" data-slide-to="1"></li>-->
  20.  
  21.                                             </ol>
  22.  
  23.                                                 <!-- Wrapper for slides -->
  24.                            
  25.  
  26.                                                 <div class="carousel-inner" role="listbox">
  27.  
  28.  
  29.                                                      <div class="item  active">
  30.  
  31.                                                         <img src="'.$array_valorados['imagen'].'" titulo="'.utf8_encode($array_valorados['articulo']).'" alt="'.utf8_encode($array_valorados['articulo']).'" style="padding:2px 20px 2px 2px;" width="600px" height="auto">
  32.  
  33.                                                      </div>
  34.                                                        
  35.                                                      <!--<div class="item">
  36.  
  37.                                                         <img src="3.jpg" titulo="'.utf8_encode($array_valorados['articulo']).'" alt="'.utf8_encode($array_valorados['articulo']).'" style="padding:2px 20px 2px 2px;" width="600px" height="auto">
  38.  
  39.                                                      </div>-->
  40.  
  41.                                                 </div>
  42.  
  43.                                                                                                
  44.                                                 <!-- Left and right controls -->
  45.                                                 <a class="left carousel-control" href="#myCarousel'.$count_valoracion.'" role="button" data-slide="prev" style="background-color:transparent; border:solid 0px transparent;">
  46.                                                      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  47.                                                      <span class="sr-only"><img src="images/left.png"></span>
  48.                                                 </a>
  49.                                                 <a class="right carousel-control" href="#myCarousel'.$count_valoracion.'" role="button" data-slide="next" style="background-color:transparent; border:solid 0px transparent;">
  50.                                                      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  51.                                                      <span class="sr-only"><img src="images/right.png"></span>
  52.                                                 </a>
  53.                          
  54.                                         </div>            
  55.  
  56.                                   </div>
  57.  
  58.                                 <div class="modal-footer">
  59.                                    
  60.                                     <!--<p style="font-size:11pt;">Recomendado por: '.$recomendacion.' de '.$numero_articulo_valoracion.' usuario/s</p>-->
  61.                                
  62.                                 </div>
  63.                                
  64.                             </div>
  65.  
  66.                         </div>
  67.  
  68.                     </div>

He buscado bastante en internet pero no consigo que se cierre no se que puede ser, salvo por eso funciona bien, a ver si alguien sabe que puede ser o como lo podría conseguir.

Saludos!
  #2 (permalink)  
Antiguo 30/09/2015, 20:35
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 11 años, 3 meses
Puntos: 39
Respuesta: Problema con bootstrap carrousel modal, no se cierra al hacer click fuera

Crea una función para que cuando le hagas click al div/span que bootstrap usa como fondo del modal se dispare un trigger que le haga click al botón de cierre...
__________________
velarde23.com - Soluciones Web
  #3 (permalink)  
Antiguo 01/10/2015, 04:29
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 9 meses
Puntos: 4
Respuesta: Problema con bootstrap carrousel modal, no se cierra al hacer click fuera

Hola siddartha gracias por tu respuesta,

Entiendo el planteamiento pero no tengo sufucientes conocimientos de bootstrap para hacerlo, conoces algún ejemplo o código que haga algo similar para poder modificarlo o orientarme.

Gracias!!
  #4 (permalink)  
Antiguo 01/10/2015, 14:53
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 11 años, 3 meses
Puntos: 39
Respuesta: Problema con bootstrap carrousel modal, no se cierra al hacer click fuera

Dime, la consola del navegador te muestra algún error??? acabo de ver las ventanas modales en la documentacion de Bootstrap (no he usado bootstrap al 100%) y sí hace lo que tu quieres que haga, la solución que yo te proponìa lo puedes hacer teniendo conocimientos de Js o Jquery pero no parece necesario añadir codigo extra
__________________
velarde23.com - Soluciones Web

Etiquetas: bootstrap, carrousel, cierra, fuera, funcion, modal, valor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:25.