Bootstrap 4 Modal

Bootstrap 4 Modal

El siguiente ejm muestra como crear un modal básico.

Ejm

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

Añade animación

Usa la clase .fade para agregar un efecto de desvanecimiento al abrir y cerrar el modal.

Ejm

<!-- Fading modal -->
<div class="modal fade"></div>

<!-- Modal without animation -->
<div class="modal"></div>

Tamaño del modal

Cambia el tamaño del modal agregando la clase .modal-sm para modales pequeños, la clase .modal-lg para modales grandes o .modal-xl para modales extra grandes.

Agregue la clase de tamaño al elemento <div> con la clase .modal-dialog.

Ejm

Tamaño pequeño
<div class="modal-dialog modal-sm">

Tamaño grande
<div class="modal-dialog modal-lg">

Tamaño extragrande
<div class="modal-dialog modal-xl">

Por defecto presentará un tamaño medio.

Modal centrado

Centra el modal vertical y horizontalmente dentro de la página, con la clase centrada en el diálogo .modal-dialog-centered.

Ejm

<div class="modal-dialog modal-dialog-centered">

Desplazamiento de modal

Cuando tenemos mucho contenido dentro del modal, se agrega una barra de desplazamiento a la página. Sin embargo, es posible desplazarse solo dentro del modal, en lugar de la página en sí, agregando .modal-dialog-scrollable a .modal-dialog.

Ejm

<div class="modal-dialog modal-dialog-scrollable">