Modal Bootstrap 5

Modal

El componente Modal es un cuadro de diálogo/ventana emergente que se muestra en la parte superior de la página actual:

Cómo crear un modal

El siguiente ejemplo muestra cómo crear un modal básico:

Ejemplo

<!-- Botón para abrir el modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Abrir modal
</button>
<!-- Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Título del modal -->
      <div class="modal-header">
        <h4 class="modal-title">Título del Modal</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- Cuerpo del modal -->
      <div class="modal-body">
        Cuerpo del modal ..
      </div>
      <!-- Pie de página del modal -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

Pruebe usted mismo

para agregar animación

Por favor, utilice .fade La clase se agrega para agregar efectos de entrada y salida suaves al abrir y cerrar el modal:

Ejemplo

<!-- Modal con desvanecimiento -->
<div class="modal fade"></div>
<!-- Modal sin animación -->
<div class="modal"></div>

Pruebe usted mismo

Tamaño del modal

Agregando para el modal pequeño .modal-sm la clase (ancho máximo 300px) para el modal grande .modal-lg la clase (ancho máximo 800px) o agregue para el modal de gran tamaño .modal-xl para cambiar el tamaño del modal (ancho máximo 1140 píxeles). El ancho máximo por defecto es de 500 píxeles.

Por favor, coloque .modal-dialog Agregue la clase y el tamaño a <div> Elemento:

Modal Pequeño

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

Pruebe usted mismo

Modal Grande

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

Pruebe usted mismo

Modal Extra Large

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

Pruebe usted mismo

Por defecto, el tamaño del modal es "medium" (ancho máximo de 500px).

Modal a pantalla completa

Si desea que el modal abarque toda la anchura y altura de la página, utilice .modal-fullscreen Clase:

Ejemplo

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

Pruebe usted mismo

Modal a pantalla completa responsive

También puede usar .modal-fullscreen-*-* Clase que controla cuándo el modal debe mostrarse a pantalla completa:

Clase Descripción Ejemplo
.modal-fullscreen-sm-down Pantalla completa por debajo de 576px Pruebe usted mismo
.modal-fullscreen-md-down Pantalla completa por debajo de 768px Pruebe usted mismo
.modal-fullscreen-lg-down Pantalla completa por debajo de 992px Pruebe usted mismo
.modal-fullscreen-xl-down Pantalla completa por debajo de 1200px Pruebe usted mismo
.modal-fullscreen-xxl-down Pantalla completa por debajo de 1400px Pruebe usted mismo

Modal centrado

Al usar .modal-dialog-centric Clase, centrar verticalmente y horizontalmente el modal en la página:

Ejemplo

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

Pruebe usted mismo

Modal deslizante

Cuando hay mucho contenido en el modal, se agrega una barra de desplazamiento a la página. Vea el siguiente ejemplo para entender:

Ejemplo

<div class="modal-dialog">

Pruebe usted mismo

Pero, al usar .modal-dialog-scrollable Agregar a .modal-dialog Se puede desplazar solo dentro del modal, no en la página en sí:

Ejemplo

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

Pruebe usted mismo