Modal

El complemento modal de JavaScript de Bootstrap permite agregar cuadros de diálogo a la página sitio para notificaciones de usuario o contenido personalizado.

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 "telón de fondo", se cerrará automáticamente el modal.
Bootstrap solo admite una ventana modal a la vez. Los modales anidados no son compatibles.
Los modales usan position: fixed.
Siempre que sea posible, se debe colocar el modal en una posición de nivel superior en el documento HTML para evitar posibles interferencias de otros elementos.

Componentes de modales:

Los componentes del modal incluyen el encabezado, el cuerpo y el pie de página (opcional).

Mostrar modal

El primer div que envuelve el diálogo tiene asignada la clase "modal".
La clase "fade" hace que el diálogo aparezca lentamente en pantalla.
El segundo div interno asigna la clase "modal-dialog".
El tercer div anidado tiene asignada la clase "modal-content".
Dentro de ese tercer div se disponen los divs de la cabecera, cuerpo y pie del diálogo.

Tamaño y centrado del diálogo:

En Bootstrap 4 se dispone además del tamaño por defecto del diálogo de otros dos tamaños que se fijan con las clases:

Dialogo centrado:

Si se quiere que el diálogo aparezca centrado en forma horizontal y vertical se debe aplicar la clase "modal-dialog-centered" al mismo div que define la clase "modal-dialog".

modal-dialog-centered

Modal

Componentes de modales:

Titulo del modal

Tamaño y centrado del diálogo:

Titulo del modal

Titulo del modal

Dialogo centrado:

Titulo del modal