Utilice 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.
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 del bodymodo que el contenido modal se desplaza 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 en cuanto a su renderizado. 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 .modaldentro 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 autofocusatributo HTML no tiene ningún efecto en los modales de Bootstrap. Para lograr el mismo efecto, use un JavaScript personalizado:
Ejemplos de
Componentes modales
A continuación se muestra un ejemplo modal estático (lo que significa que positiony displayse 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.
Titulo
El texto del cuerpo modal va aquí.
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.
Titulo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.