Saltar al contenido principal Saltar a la navegación de documentos
Check
in English

Modal

Use el complemento modal de JavaScript de Bootstrap para agregar cuadros de diálogo a su sitio para cajas de luz, notificaciones de usuario o contenido completamente personalizado.

En esta página

Cómo funciona

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

  • Los modales se construyen con HTML, CSS y JavaScript. Se colocan sobre todo lo demás en el documento y eliminan el desplazamiento <body>para que el contenido modal se desplace en su lugar.
  • Al hacer clic en el "telón de fondo" modal, se cerrará automáticamente el modal.
  • Bootstrap solo admite una ventana modal a la vez. Los modales anidados no son compatibles porque creemos que son experiencias de usuario deficientes.
  • Uso de modales position: fixed, que a veces puede ser un poco particular sobre su representación. Siempre que sea posible, coloque su HTML modal en una posición de nivel superior para evitar posibles interferencias de otros elementos. Es probable que tenga problemas al anidar .modaldentro de otro elemento fijo.
  • Una vez más, debido a position: fixed, existen algunas advertencias con el uso de modales en dispositivos móviles. Consulte nuestros documentos de soporte del navegador para obtener más información.
  • Debido a cómo HTML5 define su semántica, el autofocusatributo HTML no tiene efecto en los modales de Bootstrap. Para lograr el mismo efecto, use 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 prefers-reduced-motionconsulta de medios. Consulte la sección de movimiento reducido de nuestra documentación de accesibilidad .

Siga leyendo para obtener demostraciones y pautas de uso.

Ejemplos

A continuación se muestra un ejemplo modal estáticoposition (lo que significa que displayha sido anulado). Se incluyen el encabezado modal, el cuerpo modal (obligatorio para padding) y el pie de página modal (opcional). Le pedimos que incluya encabezados modales con acciones de descarte siempre que sea posible, o proporcione otra acción de descarte explícita.

Título modal

El texto del cuerpo 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>

Demo en vivo

Alterne una demostración modal de trabajo haciendo clic en el botón a continuación. Se deslizará hacia abajo y se desvanecerá 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">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <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>

telón de fondo estático

Cuando el fondo se establece en estático, el modal no se cerrará al hacer clic fuera de él. Haga 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">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <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 se vuelven demasiado largos para la ventana gráfica o el dispositivo del usuario, se desplazan independientemente de la página misma. Pruebe la demostración a continuación para ver a qué nos referimos.

También puede crear un modal desplazable que permita desplazar el cuerpo modal agregando .modal-dialog-scrollablea .modal-dialog.

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

Centrado verticalmente

Añadir .modal-dialog-centereda .modal-dialogpara 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>

Información sobre herramientas y ventanas emergentes

La información sobre herramientas y las ventanas emergentes se pueden colocar dentro de los modales según sea necesario. Cuando los modales están cerrados, cualquier información sobre herramientas y ventanas emergentes también se descartan automáticamente.

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <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 cuadrícula

Utilice el sistema de cuadrícula Bootstrap dentro de un modal anidando .container-fluiddentro del archivo .modal-body. Luego, use las clases normales del sistema de cuadrícula como lo haría 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

¿Tiene un montón de botones que activan el mismo modal con contenidos ligeramente diferentes? Utilice los atributos HTMLevent.relatedTarget y para variar el contenido del modal según el botón en el que se hizo clic.data-bs-*

A continuación se muestra una demostración en vivo seguida de un ejemplo de HTML y JavaScript. Para obtener más información, lea los documentos de eventos modales para obtener 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">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <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>
const exampleModal = document.getElementById('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

Alterne entre múltiples modales con una ubicación inteligente de los atributos data-bs-targety . data-bs-togglePor ejemplo, podría alternar un modal de restablecimiento de contraseña desde un modal de inicio de sesión ya abierto. Tenga en cuenta que no se pueden abrir múltiples modales al mismo tiempo ; este método simplemente alterna entre dos modales separados.

Abrir primer modal
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">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <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">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <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>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

Cambiar animación

La $modal-fade-transformvariable determina el estado de transformación .modal-dialogantes de la animación de fundido de entrada modal, la $modal-show-transformvariable determina la transformación de .modal-dialogal final de la animación de fundido de entrada modal.

Si desea, por ejemplo, una animación de acercamiento, puede configurar $modal-fade-transform: scale(.8).

Eliminar animación

Para los modales que simplemente aparecen en lugar de aparecer gradualmente, elimine la .fadeclase de su 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, debe llamar myModal.handleUpdate()para reajustar la posición del modal en caso de que aparezca una barra de desplazamiento.

Accesibilidad

Asegúrese de agregar aria-labelledby="...", haciendo referencia al título modal, a .modal. Además, puede dar una descripción de su diálogo modal con aria-describedbyon .modal. Tenga en cuenta que no necesita agregar role="dialog", ya que ya lo agregamos a través de JavaScript.

Incrustación de 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. Consulte esta útil publicación de desbordamiento de pila para obtener más información.

Tamaños opcionales

Los modales tienen tres tamaños opcionales, disponibles a través de clases de modificadores para colocar en un archivo .modal-dialog. Estos tamaños se activan en ciertos puntos de interrupción para evitar las barras de desplazamiento horizontales en ventanas de visualización más estrechas.

Tamaño Clase Ancho máximo modal
Pequeña .modal-sm 300px
Defecto Ninguna 500px
Largo .modal-lg 800px
Extra grande .modal-xl 1140px

Nuestro modal predeterminado sin clase de modificador constituye el modal de tamaño "mediano".

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

Modo de pantalla completa

Otra anulación es la opción de mostrar un modal que cubre la ventana gráfica del usuario, disponible a través de clases modificadoras que se colocan en un archivo .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 de variables CSS en evolución de Bootstrap, los modales ahora usan variables CSS locales .modalpara .modal-backdropmejorar la personalización en tiempo real. Los valores para las variables CSS se establecen a través de Sass, por lo que también se admite la personalización de Sass.

  --#{$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};
  
  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Sass variables

$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:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        var(--#{$prefix}border-color-translucent);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $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);

Círculo

Los modales receptivos de pantalla completa se generan a través del $breakpointsmapa y un bucle en 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 complemento modal alterna su contenido oculto a pedido, a través de atributos de datos o JavaScript. También anula el comportamiento de desplazamiento predeterminado y genera un .modal-backdroppara proporcionar un área de clic para descartar los modales mostrados al hacer clic fuera del modal.

A través de atributos de datos

Palanca

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

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

Despedir

El despido se puede lograr con el dataatributo 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-targetcomo se muestra a continuación:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Si bien se admiten ambas formas de descartar un modal, tenga en cuenta que descartar desde fuera de un modal no coincide con el patrón de diálogo (modal) de la Guía de prácticas de creación de ARIA . Haz esto bajo tu propio riesgo.

A través de 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 a través de atributos de datos o JavaScript, puede agregar un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrese de cambiar el tipo de caso del nombre de la opción de " camelCase " a " kebab-case " al pasar las opciones a través de atributos de datos. Por ejemplo, use data-bs-custom-class="beautifier"en lugar de data-bs-customClass="beautifier".

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

Nombre Escribe Defecto Descripción
backdrop booleano,'static' true Incluye un elemento de fondo modal. Alternativamente, especifique staticun fondo que no cierre el modal cuando se haga clic.
focus booleano true Pone el foco en el modal cuando se inicializa.
keyboard booleano true Cierra el modal cuando se presiona la tecla escape.

Métodos

Transiciones y métodos asíncronos

Todos los métodos de API son asíncronos e inician una transición . Vuelven a la persona que llama tan pronto como se inicia la transición, pero antes de que finalice . Además, se ignorará una llamada de método en un componente en transición .

Consulte nuestra documentación de JavaScript para obtener más información .

Opciones de pase

Activa tu contenido como modal. Acepta opciones opcionales object.

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 DOM)
getInstance Método estático que le permite obtener la instancia modal asociada con un elemento DOM.
getOrCreateInstance Método estático que le permite obtener la instancia modal asociada con un elemento DOM, o crear una nueva en caso de que no se haya inicializado.
handleUpdate Reajuste 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 desplazamiento).
hide Oculta manualmente un modal. Vuelve a la persona que llama antes de que se haya ocultado realmente el modal (es decir, antes de hidden.bs.modalque ocurra el evento).
show Abre manualmente un modal. Vuelve a la persona que llama antes de que se haya mostrado realmente el modal (es decir, antes de shown.bs.modalque ocurra el evento). Además, puede pasar un elemento DOM como argumento que se puede recibir en los eventos modales (como la relatedTargetpropiedad). (es decir const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle),
toggle Cambia manualmente un modal. Vuelve a la persona que llama antes de que se haya mostrado u ocultado el modal (es decir, antes de que ocurra el evento shown.bs.modalo ).hidden.bs.modal

Eventos

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

Evento Descripción
hide.bs.modal Este evento se activa inmediatamente cuando hidese llama al método de instancia.
hidden.bs.modal Este evento se activa cuando el modal ha terminado de ocultarse para el usuario (esperará a que se completen las transiciones de CSS).
hidePrevented.bs.modal Este evento se activa cuando se muestra el modal, se muestra su fondo staticy se realiza un clic fuera del modal. El evento también se activa cuando se presiona la tecla Escape y la keyboardopción se establece en false.
show.bs.modal Este evento se activa inmediatamente cuando showse llama al método de instancia. Si es causado por un clic, el elemento en el que se hizo clic está disponible como relatedTargetpropiedad del evento.
shown.bs.modal Este evento se activa cuando el modal se ha hecho visible para el usuario (esperará a que se completen las transiciones de CSS). Si es causado por un clic, el elemento en el que se hizo clic está disponible como relatedTargetpropiedad del evento. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})