Modal

Utiliza el plugin de JavaScript de modales de Bootstrap para agregar diálogos a tu sitio para lightboxes, notificaciones de usuario o contenido completamente personalizado.

En esta página

Cómo funciona

Antes de comenzar 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 colocan sobre todo lo demás en el documento y eliminan el desplazamiento (scroll) del <body> para que, en su lugar, se desplace el contenido del modal.
Al hacer clic en el "telón de fondo" (backdrop) del modal, este se cerrará automáticamente.
Bootstrap solo admite una ventana modal a la vez. Los modales anidados no son compatibles, ya que consideramos que ofrecen malas experiencias de usuario.
Los modales usan position: fixed, lo que a veces puede ser un poco particular con 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. Es probable que tengas problemas al anidar un .modal dentro de otro elemento fijo.
Una vez más, debido a position: fixed, existen algunas advertencias al usar modales en dispositivos móviles. Consulta nuestra documentación de soporte de navegadores para obtener 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, utiliza un poco 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 consulta de medios prefers-reduced-motion. Consulta la sección de movimiento reducido en nuestra documentación de accesibilidad.

Sigue leyendo para ver demostraciones y pautas de uso.

Ejemplos

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

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Título del modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>El texto del cuerpo del modal va aquí.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary">Guardar cambios</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. Sin embargo, estructuralmente, un diálogo modal representa su propio documento/contexto separado, por lo que el .modal-title idealmente debería ser un <h1>. Si es necesario, puedes utilizar las utilidades de tamaño de fuente para controlar la apariencia del encabezado. Todos los siguientes ejemplos en vivo utilizan este enfoque.

Demostración en vivo

Activa una demostración de modal en funcionamiento 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">
  Lanzar modal de demostración
</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">Título del modal</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">Cerrar</button>
        <button type="button" class="btn btn-primary">Guardar cambios</button>
      </div>
    </div>
  </div>
</div>

Telón de fondo estático

Cuando el telón de fondo (backdrop) se establece en 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">
  Lanzar modal con telón de fondo estático
</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">Título del modal</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">Cerrar</button>
        <button type="button" class="btn btn-primary">Entendido</button>
      </div>
    </div>
  </div>
</div>

Desplazamiento de contenido largo

Cuando los modales se vuelven demasiado largos para la ventana gráfica (viewport) o el dispositivo del usuario, se desplazan independientemente de la página misma. Prueba la demostración a continuación para ver a qué nos referimos.

También puedes crear un modal desplazable que permita desplazar el cuerpo del modal agregando .modal-dialog-scrollable a .modal-dialog.

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

Centrado verticalmente

Agrega .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 popovers se pueden colocar dentro de los modales según sea necesario. Cuando se cierran los modales, los tooltips y popovers que contienen también se descartan automáticamente.

<div class="modal-body">
  <h2 class="fs-5">Popover en un modal</h2>
  <p>Este <button class="btn btn-secondary" data-bs-toggle="popover" title="Título del popover" data-bs-content="El contenido del cuerpo del popover se establece en este atributo.">botón</button> activa un popover al hacer clic.</p>
  <hr>
  <h2 class="fs-5">Tooltips en un modal</h2>
  <p><a href="#" data-bs-toggle="tooltip" title="Tooltip">Este enlace</a> y <a href="#" data-bs-toggle="tooltip" title="Tooltip">ese enlace</a> tienen tooltips al pasar el cursor.</p>
</div>

Uso de la cuadrícula

Utiliza el sistema de cuadrícula de Bootstrap dentro de un modal anidando .container-fluid dentro de .modal-body. Luego, usa las clases normales del sistema de cuadrícula 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">
        Nivel 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Nivel 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Nivel 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

A continuación se muestra una demostración en vivo seguida de un ejemplo de HTML y JavaScript. Para obtener más información, lee la documentación de eventos del modal 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">Abrir modal para @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Abrir modal para @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Abrir modal para @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">Nuevo mensaje</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">Destinatario:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Mensaje:</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">Cerrar</button>
        <button type="button" class="btn btn-primary">Enviar mensaje</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 and data-bs-toggle. Por ejemplo, podrías alternar un modal de restablecimiento de contraseña desde un modal de inicio de sesión ya abierto. Ten en cuenta que no se pueden abrir múltiples modales 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">
        Muestra un segundo modal y oculta este con el botón a continuación.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Abrir segundo 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">
        Oculta este modal y muestra el primero con el botón a continuación.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Volver al primero</button>
      </div>
    </div>
  </div>
</div>
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Abrir primer modal</button>

Cambiar animación

La variable $modal-fade-transform determina el estado de transformación de .modal-dialog antes de la animación de desvanecimiento (fade-in) 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 deseas, por ejemplo, una animación de zoom, puedes establecer $modal-fade-transform: scale(.8).

Eliminar animación

Para los modales que simplemente aparecen en lugar de desvanecerse a la vista, elimina la clase .fade del marcado de tu 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, debes llamar a myModal.handleUpdate() para reajustar la posición del modal en caso de que aparezca una barra de desplazamiento.

Accesibilidad

Asegúrate de agregar aria-labelledby="...", haciendo referencia al título del modal, a .modal. Además, puedes proporcionar una descripción de tu diálogo modal con aria-describedby en .modal. Ten en cuenta que no necesitas agregar role="dialog" ya que lo agregamos automáticamente a través de JavaScript.

Incrustar videos de YouTube

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

Tamaños opcionales

Los modales tienen tres tamaños opcionales, disponibles a través de clases modificadoras que se colocan en un .modal-dialog. Estos tamaños se activan en ciertos puntos de interrupción (breakpoints) para evitar barras de desplazamiento horizontal en ventanas gráficas más estrechas.

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

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

Otra anulación es la opción de abrir un modal que cubra la ventana gráfica (viewport) del usuario, disponible a través de 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

Agregado en v5.2.0

Como parte del enfoque evolutivo de las variables CSS de Bootstrap, los modales ahora usan variables CSS locales en .modal y .modal-backdrop para una personalización mejorada en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es 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 de 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 de pantalla completa responsivos se generan a través del 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 de modal alterna tu contenido oculto bajo demanda, a través de atributos de datos o JavaScript. También anula el comportamiento de desplazamiento predeterminado y genera un .modal-backdrop para proporcionar un área de clic para descartar los modales mostrados al hacer clic fuera del modal.

A través de atributos de datos

Alternar

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

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

Descartar

El descarte 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 utilizando 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>

Si bien se admiten ambas formas de descartar un modal, ten 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 autoría 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, puedes añadir un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate de cambiar el tipo de mayúsculas y minúsculas del nombre de la opción de “camelCase” a “kebab-case” al pasar las opciones a través de atributos de datos. 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 admiten un atributo de datos 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 de datos separados anularán los valores proporcionados en data-bs-config. Además, los atributos de datos existentes pueden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

El objeto de configuración final es el resultado fusionado de data-bs-config, data-bs- y el js object (objeto js) donde el último par clave-valor proporcionado anula a los demás.

Nombre	Tipo	Predeterminado	Descripción
`backdrop`	boolean, `’static'`	`true`	Incluye un elemento modal-backdrop. Alternativamente, especifica `static` para un telón de fondo que no cierre el modal al hacer clic.
`focus`	boolean	`true`	Enfoca el modal cuando se inicializa.
`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. Devuelven el control al llamador tan pronto como se inicia la transición, pero antes de que termine. Además, se ignorará cualquier llamada a un método en un componente en transición. Más información en nuestra documentación de JavaScript.

Pasar opciones

Activa tu contenido como un modal. Acepta un object 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 DOM)
`getInstance`	Método estático que te permite obtener la instancia de modal asociada con un elemento DOM.
`getOrCreateInstance`	Método estático que te permite obtener la instancia de modal asociada con 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 desplazamiento).
`hide`	Oculta manualmente un modal. Devuelve el control 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. Devuelve el control 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 se puede recibir en los eventos del modal (como la propiedad `relatedTarget`). (es decir, `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`).
`toggle`	Alterna manualmente un modal. Devuelve el control 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 modal mismo (es decir, en el <div class="modal">).

Evento	Descripción
`hide.bs.modal`	Este evento se dispara inmediatamente cuando se llama al método de instancia `hide`. Se puede prevenir llamando a `event.preventDefault()`. Consulta la documentación de eventos de JavaScript para obtener más detalles sobre la prevención de eventos.
`hidden.bs.modal`	Este evento se dispara cuando el modal ha terminado de ocultarse del usuario (esperará a que se completen las transiciones CSS).
`hidePrevented.bs.modal`	Este evento se dispara cuando se muestra el modal, su telón de fondo es `static` y se realiza un clic fuera del modal. El evento también se dispara cuando se presiona la tecla escape y la opción `keyboard` se establece 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 en el que se hizo clic está disponible como la propiedad `relatedTarget` del evento.
`shown.bs.modal`	Este evento se dispara cuando el modal se ha hecho visible para el usuario (esperará a que se completen las transiciones CSS). Si es causado por un clic, el elemento en el que se hizo clic está disponible como la propiedad `relatedTarget` del evento.

const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // hacer algo...
})

Modal

¿Te gustó esta traducción?

Cómo funciona

Ejemplos

Componentes del modal

Título del modal

Demostración en vivo

Telón de fondo estático

Desplazamiento de contenido largo

Centrado verticalmente

Tooltips y popovers

Uso de la cuadrícula

Contenido variable del modal

Alternar entre modales

Cambiar animación

Eliminar animación

Alturas dinámicas

Accesibilidad

Incrustar videos de YouTube

Tamaños opcionales

Modal de pantalla completa

CSS

Variables

Variables de Sass

Bucles Sass

Uso

A través de atributos de datos

Alternar

Descartar

A través de JavaScript

Opciones

Métodos

Pasar opciones

Eventos