2

Estoy teniendo un problema. Tengo el siguiente codigo en HTML:

<a id="accessGeneral" class="simple-modal-atajos botonmas" style="cursor:pointer;"><div class="divbotonmas"><i class="fa fa-plus font18"></i></div></a>

<div class="simple-modal-atajos-content modal-content rounded-modal" style="padding:10px">

</div>

Para mostrar el modal utilizo:

$(document).on("click", ".simple-modal-atajos", function(evt) {
    $('.simple-modal-atajos-content').modal();
});

Y ahora quiero capturar el evento al hacer al cerrar el modal haciendo click fuera de el, pero no estoy pudiendo. He probado con estas variantes:

$(document).on("hidden", ".simple-modal-atajos-content", function () {
    alert('se cerro');
});

$(document).on("hide", ".simple-modal-atajos-content", function () {
    alert('se cerro');
});

$(document).on("hidden.bs.modal", ".simple-modal-atajos-content", function () {
    alert('se cerro');
});

Pero ninguna parece funcionar.

1
  • Ya probaste con $('#accessGeneral').on('hidden.bs.modal', function (e) { }) el 23 mar. 2021 a las 16:27

1 respuesta 1

3

En la documentación sobre eventos, puedes capturarlo de la siguiente forma

$('#myModal').on('hidden.bs.modal', function (event) {
  // do something...
})

Existiendo dos variantes al momento de cerrar:

  • hide.bs.modal
  • hidden.bs.modal

Veo que implementas llamadas manuales al modal, pero puedes usar los atributos data-* de Bootstrap.

$('#accessGeneral').on('shown.bs.modal', function () {
 alert("Se abre");
})


$('#accessGeneral').on('hidden.bs.modal', function() {
  alert("Se cierra");
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>


<a data-toggle="modal" data-target="#accessGeneral" class="simple-modal-atajos botonmas">ABRIR</a>

<div id="accessGeneral"  class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">     
      <div class="modal-body">
        <p>CONTENIDO</p>
      </div>     
    </div>
  </div>
</div>

El ejemplo utiliza la versión 4.6 de Bootstrap, para la versión 5, que no requiere de jQuery, podrías hacerlo con Vanilla JS:

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.