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

[franjgg]

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:

<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;">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    
                                    <h4 class="modal-title">'.utf8_encode($array_valorados['articulo']).'</h4>
 
                                </div>
 
                                    <div class="modal-body">
                                       
 
                                        <div id="myCarousel'.$count_valoracion.'" class="carousel slide" data-ride="carousel"  data-interval="false">
                                            <!-- Indicators -->
                                            <ol class="carousel-indicators">
                                            <li data-target="#myCarousel'.$count_valoracion.'" data-slide-to="0" class="active"></li>
                                            <!--<li data-target="#myCarousel'.$count_valoracion.'" data-slide-to="1"></li>-->
 
                                            </ol>
 
                                                <!-- Wrapper for slides -->
                           
 
                                                <div class="carousel-inner" role="listbox">
 
 
                                                     <div class="item  active">
 
                                                        <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">
 
                                                     </div>
                                                        
                                                     <!--<div class="item">
 
                                                        <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">
 
                                                     </div>-->
 
                                                </div>
 
                                                                                                
                                                <!-- Left and right controls -->
                                                <a class="left carousel-control" href="#myCarousel'.$count_valoracion.'" role="button" data-slide="prev" style="background-color:transparent; border:solid 0px transparent;">
                                                     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                                     <span class="sr-only"><img src="images/left.png"></span>
                                                </a>
                                                <a class="right carousel-control" href="#myCarousel'.$count_valoracion.'" role="button" data-slide="next" style="background-color:transparent; border:solid 0px transparent;">
                                                     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                                     <span class="sr-only"><img src="images/right.png"></span>
                                                </a>
                         
                                        </div>            
 
                                  </div>
 
                                <div class="modal-footer">
                                    
                                    <!--<p style="font-size:11pt;">Recomendado por: '.$recomendacion.' de '.$numero_articulo_valoracion.' usuario/s</p>-->
                                
                                </div>
                                
                            </div>
 
                        </div>
 
                    </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!

[siddartha23]

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...

[franjgg]

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!!

[siddartha23]

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