Nécessite le plugin javascript bootstrap correspondant.
La modal prévoit de façon facultative .modal-header, .modal-body et .modal-footer.
Par défaut, le clic sur l'overlay fermet la fermeture de la modal.
L'attribut data-dismiss="modal" est à mettre sur tout élément servant de bouton de fermeture.

Overlay non cliquable

En ajoutant data-backdrop="static" sur la modal.

Long content
Screen scrollable
Body scrollable

A noter l'ajout de la class .modal-dialog-scrollable sur la .modal-dialog.

Centrage vertical

Ajouter la classe .modal-dialog-centered à .modal-dialog.

Size

Les classes suivantes sont à metrte sur .modal-dialog.

Size Class Modal max-width
Small .modal-sm 300px
Default None 640px
Large .modal-lg 1083px
Extra large .modal-xl 1296px
Focus

Méthode pour déplacer le focus lors de l'ouverture d'une modal.

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
}) 

En savoir plus sur les possibilités d'utiliser des grids, des tooltip, des popovers, des passages de variables... et l'implémentation javascript