Modal
Utilice el complemento modal JavaScript de Bootstrap para agregar cuadros de diálogo a su sitio para cajas de luz, notificaciones de usuario o contenido completamente personalizado.
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 crean 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 un.modal
dentro de otro elemento fijo. -
Una vez más, debido a
position: fixed
, existen algunas advertencias sobre el uso de modales en dispositivos móviles. Consulte nuestros documentos de soporte del navegador para obtener más detalles. -
Debido a cómo HTML5 define su semántica,
el
autofocus
atributo HTML no tiene ningún efecto en los modales de Bootstrap. Para lograr el mismo efecto, use JavaScript personalizado:
El efecto de animación de este componente depende de la
prefers-reduced-motion
consulta de medios.
Consulte la
sección de movimiento reducido de nuestra documentación de accesibilidad
.
Siga leyendo para ver demostraciones y pautas de uso.
Ejemplos
Componentes modales
A continuación se muestra un ejemplo modal
estático
(lo que significa que
position
y
display
se han anulado).
Se incluyen el encabezado modal, el cuerpo modal (requerido 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 que proporcione otra acción de descarte explícita.
Demo en vivo
Alternar una demostración modal de trabajo haciendo clic en el botón de abajo. Se deslizará hacia abajo y aparecerá gradualmente desde la parte superior de la página.
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.
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. Pruebe la demostración a continuación para ver lo que queremos decir.
También puede crear un modal desplazable que permita desplazarse por el cuerpo modal agregando
.modal-dialog-scrollable
a
.modal-dialog
.
Centrado verticalmente
Agregue
.modal-dialog-centered
a
.modal-dialog
para centrar verticalmente el modal.
Información sobre herramientas y ventanas emergentes
La información sobre herramientas y panecillos se pueden colocar dentro de modales, según sea necesario. Cuando los modales están cerrados, cualquier información sobre herramientas y ventanas emergentes dentro también se descartan automáticamente.
Usando la cuadrícula
Utilice el sistema de cuadrícula Bootstrap dentro de un modal anidando
.container-fluid
dentro de
.modal-body
. Luego, use las clases normales del sistema de cuadrícula como lo haría en cualquier otro lugar.
Contenido modal variable
¿Tiene un montón de botones que activan el mismo modal con contenidos ligeramente diferentes?
Use
event.relatedTarget
y
atributos
HTML
data-*
(posiblemente a
través de jQuery
) para variar el contenido del modal según el botón en el que se hizo clic.
A continuación se muestra una demostración en vivo seguida de HTML y JavaScript de ejemplo.
Para obtener más información,
lea los documentos de eventos modales
para obtener detalles sobre
relatedTarget
.
Cambiar animación
La
$modal-fade-transform
variable determina el estado de transformación de
.modal-dialog
antes de la animación modal de aparición gradual, la
$modal-show-transform
variable determina la transformación de
.modal-dialog
al final de la animación modal de aparición gradual.
Si desea, por ejemplo, una animación con zoom, puede configurar
$modal-fade-transform: scale(.8)
.
Quitar animación
Para los modales que simplemente aparecen en lugar de aparecer gradualmente en la vista, elimine la
.fade
clase de su marcado modal.
Alturas dinámicas
Si la altura de un modal cambia mientras está abierto, debe llamar
$('#myModal').modal('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-describedby
on
.modal
. Tenga en cuenta que no necesita agregar,
role="dialog"
ya que ya lo agregamos a través de JavaScript.
Incrustar videos de YouTube
Incrustar videos de YouTube en modales requiere JavaScript adicional no en Bootstrap para detener automáticamente la reproducción y más. Consulte esta publicación útil 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 para colocar en un
.modal-dialog
. Estos tamaños se activan en ciertos puntos de interrupción para evitar las barras de desplazamiento horizontales en vistas más estrechas.
Talla | Clase | Ancho máximo modal |
---|---|---|
Pequeña | .modal-sm |
300px |
Defecto | Ninguna | 500px |
Kiosco | .modal-kiosk |
676px |
Grande | .modal-lg |
800px |
Extra grande | .modal-xl |
1140px |
Nuestro modal predeterminado sin clase modificadora constituye el modal de tamaño "mediano".
Modal full screen
Uso
El complemento modal alterna su contenido oculto a pedido, a través de atributos de datos o JavaScript.
También se suma
.modal-open
al
<body>
para anular 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
Activa un modal sin escribir JavaScript. Establecer
data-toggle="modal"
en un elemento de controlador, como un botón, junto con
data-target="#foo"
o
href="#foo"
para apuntar a un modal específico para alternar.
Vía JavaScript
Llame a un modal con id
myModal
con una sola línea de JavaScript:
Opciones
Las opciones se pueden pasar a través de atributos de datos o JavaScript.
Para los atributos de datos, agregue el nombre de la opción a
data-
, como en
data-backdrop=""
.
Nombre | Tipo | Defecto | Descripción |
---|---|---|---|
fondo |
booleano o la cadena
'static'
|
cierto |
Incluye un elemento de fondo modal.
Alternativamente, especifique
static
un fondo que no cierre el modal al hacer clic.
|
teclado | booleano | cierto | Cierra el modal cuando se presiona la tecla Escape |
atención | booleano | cierto | Pone el foco en el modal cuando se inicializa. |
show | booleano | cierto | Muestra el modal cuando se inicializa. |
Métodos
Transiciones y métodos asincrónicos
Todos los métodos API son asincrónicos 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 a un método en un componente en transición .
Consulte nuestra documentación de JavaScript para obtener más información .
.modal(options)
Activa tu contenido como modal. Acepta opciones opcionales
object
.
.modal('toggle')
Cambia manualmente un modal.
Vuelve a la persona que llama antes de que el modal realmente se haya mostrado u ocultado
(es decir, antes de que ocurra el evento
shown.bs.modal
o
hidden.bs.modal
).
.modal('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.modal
que ocurra el evento).
.modal('hide')
Oculta manualmente un modal.
Vuelve a la persona que llama antes de que el modal se haya ocultado realmente
(es decir, antes de
hidden.bs.modal
que ocurra el evento).
.modal('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).
.modal('dispose')
Destruye el modal de un elemento.
Eventos
La clase modal de Bootstrap expone algunos eventos para conectarse a la funcionalidad modal.
Todos los eventos modales se disparan en el propio modal (es decir, en el
<div class="modal">
).
Tipo de evento | Descripción |
---|---|
show.bs.modal |
Este evento se activa inmediatamente cuando
show
se llama al método de instancia. Si es causado por un clic, el elemento seleccionado está disponible como
relatedTarget
propiedad del evento.
|
mostrado.bs.modal |
Este evento se activa 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 seleccionado está disponible como
relatedTarget
propiedad del evento.
|
hide.bs.modal |
Este evento se activa inmediatamente cuando
hide
se llama al método de instancia.
|
hidden.bs.modal | Este evento se activa cuando el modal ha terminado de ocultarse al usuario (esperará a que se completen las transiciones CSS). |
hidePrevented.bs.modal |
Este evento se activa cuando se muestra el modal, su telón de fondo es
static
y se realiza un clic fuera del modal o se realiza una pulsación de tecla de escape con la opción de teclado o
data-keyboard
configurada en
false .
|