Saltar al contenido principal Saltar a la navegación de la documentación
Ver en GitHub

Modal

Usa el plugin de modal de JavaScript de Bootstrap para añadir diálogos a tu sitio para lightboxes, notificaciones de usuario o contenido completamente personalizado.

On this page

Cómo funciona

Antes de empezar con el componente modal de Bootstrap, asegúrate de leer lo siguiente ya que nuestras opciones de menú han cambiado recientemente.

  • Los modales se construyen con HTML, CSS y JavaScript. Se posicionan sobre todo lo demás en el documento y eliminan el scroll del <body> para que el contenido del modal haga scroll en su lugar.
  • Hacer clic en el “fondo” del modal cerrará automáticamente el modal.
  • Bootstrap solo soporta una ventana modal a la vez. Los modales anidados no están soportados ya que consideramos que son una mala experiencia de usuario.
  • Los modales usan position: fixed, lo que a veces puede ser un poco particular respecto a su renderizado. Siempre que sea posible, coloca el HTML de tu modal en una posición de nivel superior para evitar posibles interferencias de otros elementos. Probablemente encuentres problemas al anidar un .modal dentro de otro elemento fijo.
  • Una vez más, debido a position: fixed, hay algunas advertencias al usar modales en dispositivos móviles. Consulta nuestra documentación de soporte de navegadores para más detalles.
  • Debido a cómo HTML5 define su semántica, el atributo HTML autofocus no tiene efecto en los modales de Bootstrap. Para lograr el mismo efecto, usa algo de JavaScript personalizado:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

El efecto de animación de este componente depende de la media query prefers-reduced-motion. Consulta la sección de movimiento reducido de nuestra documentación de accesibilidad.

Sigue leyendo para ver demos y guías de uso.

Ejemplos

A continuación se muestra un ejemplo de modal estático (lo que significa que su position y display han sido sobrescritos). Se incluyen el encabezado del modal, el cuerpo del modal (obligatorio para el padding) y el pie del modal (opcional). Te pedimos que incluyas encabezados de modal con acciones de cierre siempre que sea posible, o que proporciones otra acción de cierre explícita.

Título del modal

El texto del cuerpo del modal va aquí.

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

En el ejemplo estático anterior, usamos <h5>, para evitar problemas con la jerarquía de encabezados en la página de documentación. Estructuralmente, sin embargo, un diálogo modal representa su propio documento/contexto separado, por lo que el .modal-title debería idealmente ser un <h1>. Si es necesario, puedes usar las utilidades de tamaño de fuente para controlar la apariencia del encabezado. Todos los siguientes ejemplos en vivo usan este enfoque.

Demostración en vivo

Activa una demo funcional de un modal haciendo clic en el botón de abajo. Se deslizará hacia abajo y aparecerá con un desvanecimiento desde la parte superior de la página.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Fondo estático

Cuando el fondo está establecido como estático, el modal no se cerrará al hacer clic fuera de él. Haz clic en el botón de abajo para probarlo.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Desplazamiento de contenido largo

Cuando los modales son demasiado largos para el viewport o dispositivo del usuario, se desplazan de forma independiente a la página. Prueba la demo de abajo para ver a qué nos referimos.

También puedes crear un modal desplazable que permite desplazar el cuerpo del modal añadiendo .modal-dialog-scrollable a .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Centrado verticalmente

Añade .modal-dialog-centered a .modal-dialog para centrar verticalmente el modal.

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

Tooltips y popovers

Los tooltips y los popovers se pueden colocar dentro de los modales según sea necesario. Cuando se cierran los modales, cualquier tooltip y popover dentro de ellos también se cierran automáticamente.

<div class="modal-body">
  <h2 class="fs-5">Popover in a modal</h2>
  <p>This <button class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</button> triggers a popover on click.</p>
  <hr>
  <h2 class="fs-5">Tooltips in a modal</h2>
  <p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Usando la grilla

Utiliza el sistema de grilla de Bootstrap dentro de un modal anidando .container-fluid dentro del .modal-body. Luego, usa las clases normales del sistema de grilla como lo harías en cualquier otro lugar.

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Contenido modal variable

¿Tienes un conjunto de botones que activan el mismo modal con contenidos ligeramente diferentes? Usa event.relatedTarget y los atributos HTML data-bs-* para variar el contenido del modal dependiendo de en qué botón se haya hecho clic.

A continuación se muestra una demo en vivo seguida de HTML y JavaScript de ejemplo. Para más información, lee la documentación de eventos del modal para más detalles sobre relatedTarget.

html 
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">New message</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
site/src/assets/partials/snippets.js 
const exampleModal = document.getElementById('exampleModal')
if (exampleModal) {
  exampleModal.addEventListener('show.bs.modal', event => {
    // Button that triggered the modal
    const button = event.relatedTarget
    // Extract info from data-bs-* attributes
    const recipient = button.getAttribute('data-bs-whatever')
    // If necessary, you could initiate an Ajax request here
    // and then do the updating in a callback.

    // Update the modal's content.
    const modalTitle = exampleModal.querySelector('.modal-title')
    const modalBodyInput = exampleModal.querySelector('.modal-body input')

    modalTitle.textContent = `New message to ${recipient}`
    modalBodyInput.value = recipient
  })
}

Alternar entre modales

Alterna entre múltiples modales con una colocación inteligente de los atributos data-bs-target y data-bs-toggle. Por ejemplo, podrías alternar un modal de restablecimiento de contraseña desde dentro de un modal de inicio de sesión ya abierto. Ten en cuenta que no se pueden tener múltiples modales abiertos al mismo tiempo—este método simplemente alterna entre dos modales separados.

html 
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Open first modal</button>

Cambiar la animación

La variable $modal-fade-transform determina el estado de transformación de .modal-dialog antes de la animación de desvanecimiento del modal, la variable $modal-show-transform determina la transformación de .modal-dialog al final de la animación de desvanecimiento del modal.

Si quieres por ejemplo una animación de zoom, puedes establecer $modal-fade-transform: scale(.8).

Eliminar la animación

Para modales que simplemente aparecen en lugar de desvanecerse a la vista, elimina la clase .fade de tu marcado modal.

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Alturas dinámicas

Si la altura de un modal cambia mientras está abierto, deberías llamar a myModal.handleUpdate() para reajustar la posición del modal en caso de que aparezca una barra de scroll.

Accesibilidad

Asegúrate de añadir aria-labelledby="...", haciendo referencia al título del modal, a .modal. Además, puedes dar una descripción de tu diálogo modal con aria-describedby en .modal. Ten en cuenta que no necesitas añadir role="dialog" ya que lo añadimos vía JavaScript.

Incrustar videos de YouTube

Incrustar videos de YouTube en modales requiere JavaScript adicional que no está en Bootstrap para detener automáticamente la reproducción y más. Consulta este útil post de Stack Overflow para más información.

Tamaños opcionales

Los modales tienen tres tamaños opcionales, disponibles mediante clases modificadoras que se colocan en un .modal-dialog. Estos tamaños entran en acción en ciertos breakpoints para evitar barras de scroll horizontales en viewports más estrechos.

Tamaño Clase Ancho máximo del modal
Pequeño .modal-sm 300px
Predeterminado Ninguno 500px
Grande .modal-lg 800px
Extra grande .modal-xl 1140px

Nuestro modal predeterminado sin clase modificadora constituye el modal de tamaño “medio”. 

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Modal a pantalla completa

Otra posibilidad es la opción de mostrar un modal que cubre el viewport del usuario, disponible mediante clases modificadoras que se colocan en un .modal-dialog.

Clase Disponibilidad
.modal-fullscreen Siempre
.modal-fullscreen-sm-down 576px
.modal-fullscreen-md-down 768px
.modal-fullscreen-lg-down 992px
.modal-fullscreen-xl-down 1200px
.modal-fullscreen-xxl-down 1400px 
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

CSS

Variables

Añadido en v5.2.0

Como parte del enfoque evolutivo de variables CSS de Bootstrap, los modales ahora usan variables CSS locales en .modal y .modal-backdrop para una personalización en tiempo real mejorada. Los valores de las variables CSS se establecen mediante Sass, por lo que la personalización con Sass también sigue siendo compatible.

scss/_modal.scss 
--#{$prefix}modal-zindex: #{$zindex-modal};
--#{$prefix}modal-width: #{$modal-md};
--#{$prefix}modal-padding: #{$modal-inner-padding};
--#{$prefix}modal-margin: #{$modal-dialog-margin};
--#{$prefix}modal-color: #{$modal-content-color};
--#{$prefix}modal-bg: #{$modal-content-bg};
--#{$prefix}modal-border-color: #{$modal-content-border-color};
--#{$prefix}modal-border-width: #{$modal-content-border-width};
--#{$prefix}modal-border-radius: #{$modal-content-border-radius};
--#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
--#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
--#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
--#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
--#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
--#{$prefix}modal-header-border-color: #{$modal-header-border-color};
--#{$prefix}modal-header-border-width: #{$modal-header-border-width};
--#{$prefix}modal-title-line-height: #{$modal-title-line-height};
--#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
--#{$prefix}modal-footer-bg: #{$modal-footer-bg};
--#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
--#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
scss/_modal.scss 
--#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
--#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
--#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Variables Sass

scss/_variables.scss 
$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               var(--#{$prefix}body-color);
$modal-content-bg:                  var(--#{$prefix}body-bg);
$modal-content-border-color:        var(--#{$prefix}border-color-translucent);
$modal-content-border-width:        var(--#{$prefix}border-width);
$modal-content-border-radius:       var(--#{$prefix}border-radius-lg);
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       var(--#{$prefix}box-shadow-sm);
$modal-content-box-shadow-sm-up:    var(--#{$prefix}box-shadow);

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;

$modal-header-border-color:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Bucles Sass

Los modales responsive a pantalla completa se generan mediante el mapa $breakpoints y un bucle en scss/_modal.scss.

scss/_modal.scss 
@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header,
      .modal-footer {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }
    }
  }
}

Uso

El plugin modal alterna tu contenido oculto bajo demanda, vía atributos data o JavaScript. También sobrescribe el comportamiento de scroll predeterminado y genera un .modal-backdrop para proporcionar un área de clic para cerrar los modales mostrados al hacer clic fuera del modal.

Vía atributos data

Alternar

Activa un modal sin escribir JavaScript. Establece data-bs-toggle="modal" en un elemento controlador, como un botón, junto con un data-bs-target="#foo" o href="#foo" para apuntar a un modal específico a alternar.

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

Cerrar

El cierre se puede lograr con el atributo data-bs-dismiss en un botón dentro del modal como se demuestra a continuación:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

o en un botón fuera del modal usando el data-bs-target adicional como se demuestra a continuación:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>

Aunque ambas formas de cerrar un modal son compatibles, ten en cuenta que cerrar desde fuera de un modal no coincide con el ARIA Authoring Practices Guide dialog (modal) pattern. Haz esto bajo tu propia responsabilidad.

Vía JavaScript

Crea un modal con una sola línea de JavaScript:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Opciones

Como las opciones se pueden pasar vía atributos data o JavaScript, puedes añadir un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate de cambiar el tipo de capitalización del nombre de la opción de “camelCase” a “kebab-case” al pasar las opciones vía atributos data. Por ejemplo, usa data-bs-custom-class="beautifier" en lugar de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, todos los componentes soportan un atributo data reservado experimental data-bs-config que puede albergar una configuración simple del componente como una cadena JSON. Cuando un elemento tiene los atributos data-bs-config='{"delay":0, "title":123}' y data-bs-title="456", el valor final de title será 456 y los atributos data separados sobrescribirán los valores dados en data-bs-config. Además, los atributos data existentes pueden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

El objeto de configuración final es el resultado de combinar data-bs-config, data-bs-, y el objeto js, donde el último par clave-valor dado sobrescribe a los demás.

Nombre Tipo Predeterminado Descripción
backdrop booleano, ’static' true Incluye un elemento modal-backdrop. Alternativamente, especifica static para un fondo que no cierre el modal al hacer clic.
focus boolean true Pone el foco en el modal al inicializarlo.
keyboard boolean true Cierra el modal cuando se presiona la tecla escape.

Métodos

Todos los métodos de la API son asíncronos e inician una transición. Vuelven al llamador tan pronto como la transición comienza, pero antes de que termine. Además, una llamada a un método en un componente en transición será ignorada. Obtén más información en nuestra documentación de JavaScript.

Pasando opciones

Activa tu contenido como un modal. Acepta un objeto de opciones opcional.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Método Descripción
dispose Destruye el modal de un elemento. (Elimina los datos almacenados en el elemento del DOM)
getInstance Método estático que te permite obtener la instancia del modal asociada a un elemento DOM.
getOrCreateInstance Método estático que te permite obtener la instancia del modal asociada a un elemento DOM, o crear una nueva en caso de que no haya sido inicializada.
handleUpdate Reajusta manualmente la posición del modal si la altura de un modal cambia mientras está abierto (es decir, en caso de que aparezca una barra de scroll).
hide Oculta manualmente un modal. Retorna al llamador antes de que el modal se haya ocultado realmente (es decir, antes de que ocurra el evento hidden.bs.modal).
show Abre manualmente un modal. Vuelve al llamador antes de que el modal se haya mostrado realmente (es decir, antes de que ocurra el evento shown.bs.modal). Además, puedes pasar un elemento DOM como argumento que puede ser recibido en los eventos del modal (como la propiedad relatedTarget). (es decir, const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Alterna manualmente un modal. Retorna al llamador antes de que el modal se haya mostrado u ocultado realmente (es decir, antes de que ocurra el evento shown.bs.modal o hidden.bs.modal).

Eventos

La clase modal de Bootstrap expone algunos eventos para conectarse a la funcionalidad del modal. Todos los eventos del modal se disparan en el propio modal (es decir, en el <div class="modal">).

Evento Descripción
hide.bs.modal Este evento se dispara inmediatamente cuando se ha llamado al método de instancia hide. Se puede evitar llamando a event.preventDefault(). Consulta la documentación de eventos de JavaScript para más detalles sobre la prevención de eventos.
hidden.bs.modal Este evento se dispara cuando el modal ha terminado de ocultarse al usuario (esperará a que se completen las transiciones CSS).
hidePrevented.bs.modal Este evento se dispara cuando el modal se muestra, su fondo es static y se hace clic fuera del modal. El evento también se dispara cuando se presiona la tecla escape y la opción keyboard está establecida en false.
show.bs.modal Este evento se dispara inmediatamente cuando se llama al método de instancia show. Si es causado por un clic, el elemento clickeado está disponible como la propiedad relatedTarget del evento.
shown.bs.modal Este evento se dispara cuando el modal se ha hecho visible al usuario (esperará a que se completen las transiciones CSS). Si es causado por un clic, el elemento clickeado está disponible como la propiedad relatedTarget del evento. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})
Traducción mantenida por Esdocu. Visita esdocu.com para ver más documentaciones traducidas.