2

Mi ventana modal no cierra al dar click en el botón de cerrar, anteriormente funcionaba correctamente y ahora ya no cierra,

este es el codigo html del boton cerrar:

<div id="modalContractCandidatesPre" class="modal fade" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content"> <!-- div que continen toda la ventana modal -->
                <div class="modal-header"> <!-- Header -->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

y el footer

<div class="modal-footer"> <!-- Footer -->
                    <button id="saveContractCandidatePre" type="button" class="btn btn-success">
                        <i class="fa fa-floppy-o" aria-hidden="true"></i> Guardar
                    </button>

                    <button type="button" class="btn btn-danger" data-dismiss="modal">
                        <i class="fa fa-times" aria-hidden="true"></i> Cerrar
                    </button>
                </div>
8
  • haz revisado si te sale algún error en la consola ? Commented el 23 nov. 2017 a las 22:55
  • si pero no se muestra ningun error, por eso no se que es lo que este fallando, ayer lo unico que hice agregue unas librerias para dataTable para poner botones de exportar a excel y ocultar culumnas pero no se si sea x eso Commented el 23 nov. 2017 a las 22:58
  • La segunda opción puede ser aplicarle un evento click al botón y que ejecute $("#modalContractCandidatesPre").modal('hide'); Commented el 23 nov. 2017 a las 23:00
  • no funciona el evento click Commented el 23 nov. 2017 a las 23:13
  • $("#modalCommentsCandidatesPre").off("click"); $("#modalCommentsCandidatesPre").on("click","#modalComents",closeModalComents); function closeModalComents(){ alert("se dio click en cerrar ventana"); } Commented el 23 nov. 2017 a las 23:14

2 respuestas 2

5

Es extraño que no te cierre la modal con el botón pasándole el atributo data-dismiss="modal" pero eso no es problema ya que podemos "forzar" a que la modal se cierre por medio de JavaScript:

$(".cerrarModal").click(function(){
  $("#modalContractCandidatesPre").modal('hide')
});
<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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalContractCandidatesPre">
  Abrir modal
</button>

<!-- Modal -->
<div class="modal fade" id="modalContractCandidatesPre" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close cerrarModal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Título modal</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default cerrarModal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

2
  • 1
    muy buena respuesta llevaba mucho tiempo buscando algo como estoy me ha servido a pesar de ser tan vieja la pregunta cuya respuesta es totalmente valida, saludos!
    – zerokira
    Commented el 31 may. 2018 a las 16:57
  • Excelente justo lo que andaba buscando, gracias!
    – JGuerreroS
    Commented el 1 mar. 2019 a las 18:09
0

La causa es la siguiente:

data-keyboard="false" 

este valor impide que se cierre con la tecla escape

data-backdrop="static" 

este valor impide que se cierre cuando haces click fuera del modal

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.