Modal

Usa el complemento modal de JavaScript de Bootstrap para agregar cuadros de diálogo a tu sitio para lightboxes, notificaciones de usuario o contenido completamente personalizado.

🎉 ¡La traducción de Bootstrap 5.3 ya se encuentra disponible! (Estás en Bootstrap 5.1)
😎 Esta traducción es parte del proyecto esdocu.com.

¿Sabías qué?

Podrás utilizar mejor tus modals de Bootstrap alojando tu web en un excelente web hosting.

En esta página

¿Cómo funcionan los modals?

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 del <body> para que el contenido modal se desplace en su lugar.
Al hacer clic en el “backdrop (telón de fondo)”, el modal se cerrará automáticamente.
Bootstrap solo admite una ventana modal a la vez. Los modales anidados no son compatibles porque creemos que son experiencias de usuario deficientes.
Los modales usan position: fixed, que a veces puede ser un poco particular sobre su representación. Siempre que sea posible, coloca tu HTML 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 fixed.
Una vez más, debido al position: fixed, existen algunas advertencias con el uso de modales en dispositivos móviles. Consulta nuestros documentos de soporte del navegador para obtener más información.
Debido a cómo HTML5 define su semántica, el atributo HTML autofocus no tiene ningún efecto en modales Bootstrap. Para lograr el mismo efecto, usa JavaScript personalizado:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  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 obtener demostraciones y pautas de uso.

Ejemplos

Componentes de modals

A continuación se muestra un ejemplo modal static (lo que significa que su position y display han sido sobrescritas). Se incluyen el encabezado modal, el cuerpo modal (requerido para padding) y el pie de página modal (opcional). Te pedimos que incluyas encabezados modales con acciones de descarte (cierre) siempre que sea posible, o 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 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>

Demostración en vivo

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

Backdrop estático

Cuando el fondo se establece en static, 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 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">
        <h5 class="modal-title" id="staticBackdropLabel">Título del modal</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">Cerrar</button>
        <button type="button" class="btn btn-primary">Comprendido</button>
      </div>
    </div>
  </div>
</div>

Desplazamiento de contenido largo

Cuando los modales se vuelven demasiado largos para el 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 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.

<!-- Modal centrado verticalmente -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Modal desplazable centrado verticalmente -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

Tooltips y popovers

Tooltips y popovers se pueden colocar dentro de los modales según sea necesario. Cuando los modales se cierran, todos los tooltips y popovers también se descartan automáticamente.

<div class="modal-body">
  <h5>Popover en un modal</h5>
  <p>Este <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="El contenido del cuerpo del  popover se establece en este atributo." data-bs-container="#exampleModalPopovers">botón</a> muestra un popover al hacer clic en él.</p>
  <hr>
  <h5>Tooltips en un modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip" data-bs-container="#exampleModalPopovers">Este enlace</a> y <a href="#" class="tooltip-test" title="Tooltip" data-bs-container="#exampleModalPopovers">este enlace</a> tienen tooltips en su estado hover.</p>
</div>

Uso de la cuadrícula

Utiliza el sistema de cuadrícula 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 montón de botones que activan el mismo modal con contenidos ligeramente diferentes? Usa event.relatedTarget y atributos HTML data-bs-* para variar el contenido del modal según en qué botón se hizo 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 los documentos de eventos modales para obtener detalles sobre relatedTarget.

<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">
        <h5 class="modal-title" id="exampleModalLabel">Nuevo mensaje</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">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>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Botón que activó el modal
  var button = event.relatedTarget
  // Extraer información de los atributos data-bs-*
  var recipient = button.getAttribute('data-bs-whatever')
  // Si es necesario, puedes iniciar una solicitud AJAX aquí
  // y luego realiza la actualización en una devolución de llamada.
  //
  // Actualizar el contenido del modal.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'Nuevo mensaje para ' + recipient
  modalBodyInput.value = recipient
})

Alternar entre modals

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

Abrir el primer modal

<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">
        Muestra un segundo modal y oculta este con el botón de abajo.
      </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">
        <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">
        Oculta este modal y muestra el primero con el botón de abajo.
      </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>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Abrir el primer modal</a>

Cambiar la animación

La variable $modal-fade-transform determina el estado de transformación de .modal-dialog antes de la animación de aparición gradual del modal, la variable $modal-show-transform determina la transformación de .modal-dialog en el final de la animación fade-in del modal.

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

Eliminar la animación

Para modales que simplemente aparecen en lugar de aparecer gradualmente, 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, 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="..." a .modal, haciendo referencia al título modal. Además, puedes dar una descripción de tu diálogo modal con aria-describedby en .modal. Ten en cuenta que no necesitas 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. Lee 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 de modificadores que se colocarán en un .modal-dialog. Estos tamaños se activan en ciertos breakpoints para evitar las barras de desplazamiento horizontales en viewports más estrechos.

Tamaño	Clase	Modal max-width
Small	`.modal-sm`	`300px`
Por defecto	None	`500px`
Large	`.modal-lg`	`800px`
Extra large	`.modal-xl`	`1140px`

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

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

Modals de pantalla completa

Otra posible sobrescritura es la opción de mostrar un modal que cubra el 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`	Debajo de `576px`
`.modal-fullscreen-md-down`	Debajo de `768px`
`.modal-fullscreen-lg-down`	Debajo de `992px`
`.modal-fullscreen-xl-down`	Debajo de `1200px`
`.modal-fullscreen-xxl-down`	Debajo de `1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

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:        rgba($black, .2);
$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:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-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-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);

Loop

Los modales de pantalla completa responsive se generan a través del mapa $breakpoints 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 {
        @include border-radius(0);
      }

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

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

Uso

El complemento modal alterna su contenido oculto a pedido, a través de atributos de datos o JavaScript. También sobrescribe el comportamiento hover 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

Toggle

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 para alternar.

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

Descartar (cerrar)

El descarte (cierre) se puede lograr con el atributo data en un botón dentro de modal como se muestra a continuación:

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

o en un botón fuera de modal usando data-bs-target como 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, ten en cuenta que descartar un modal desde fuera no coincide con el patrón de diseño de diálogo modal WAI-ARIA. Haz esto bajo tu propio riesgo.

A través de JavaScript

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

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Opciones

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agrega el nombre de la opción a data-bs-, como en data-bs-backdrop="".

Nombre	Tipo	Por defecto	Descripción
`backdrop`	boolean o el string `'static'`	`true`	Incluye un telón de fondo modal. Alternativamente, especifica `static` para un fondo que no cierre el modal al hacer clic.
`keyboard`	boolean	`true`	Cierra el modal cuando se presiona la tecla escape
`focus`	boolean	`true`	Pone el foco en el modal cuando se inicializa.

Métodos

Transiciones y métodos asíncronos

Todos los métodos de la API son asincrónicos e inician una transition. Regresan al lugar donde se realizó la llamada 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 medio de una transición.

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

Opciones de entrada

Activa tu contenido como modal. Acepta un object de opciones opcionales.

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

toggle

Cambia manualmente un modal. Regresa al punto de la llamada antes de que el modal se haya mostrado u ocultado (es decir, antes de que ocurra el evento shown.bs.modal o hidden.bs.modal).

myModal.toggle()

show

Abre manualmente un modal. Regresa al punto de la llamada antes de que se haya mostrado realmente el modal (es decir, antes de que ocurra el evento shown.bs.modal).

myModal.show()

Además, puedes pasar un elemento DOM como un argumento que se puede recibir en los eventos modales (como la propiedad relatedTarget).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

hide

Oculta manualmente un modal. Regresa al punto de la llamada antes de que se haya ocultado realmente el modal (es decir, antes de que ocurra el evento hidden.bs.modal).

myModal.hide()

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).

myModal.handleUpdate()

dispose

Destruye el modal de un elemento. (Elimina los datos almacenados en el elemento DOM)

myModal.dispose()

getInstance

Método estático que te permite obtener la instancia modal asociada con un elemento DOM

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

Método estático que te permite obtener la instancia modal asociada con un elemento DOM, o crear una nueva en caso de que no se haya inicializado

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

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 <div class="modal">).

Tipo de evento	Descripción
`show.bs.modal`	Este evento se activa inmediatamente cuando se llama al método de instancia `show`. Si es causado por un clic, el elemento en el que se hizo clic estará disponible como la propiedad `relatedTarget` 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 estará disponible como la propiedad `relatedTarget` del evento.
`hide.bs.modal`	Este evento se activa inmediatamente cuando se llama al método de instancia `hide`.
`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, su fondo es `static` y se hace clic fuera del modal o se presiona la tecla escape con la opción de teclado o `data-bs-keyboard` establecido en `false`.

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