Bootstrap JS Modal

Clases Modal CSS

Clase Descripción
.modal Crea un modal
.modal-content Diseña el modal correctamente con borde, color de fondo, etc. Utiliza esta clase para agregar el encabezado, el cuerpo y el pie de página del modal.
.modal-dialog-centered Centra el modal vertical y horizontalmente dentro de la página
.modal-dialog-scrollable Agrega un scroll dentro de la página
.modal-header Define el estilo de un encabezado en el Modal
.modal-body Define el estilo de cuerpo en el Modal
.modal-footer Define el estilo para el pie de página en el modal. Nota: Esta área está alineada a la derecha de manera predeterminada. Para cambiar esto, agrega justify-content-start o justify-content-center junto con la clase
.modal-sm Especifica un modal pequeño
.modal-lg Especifica un modal grande
.fade Agrega un efecto de animación / transición que desvanece el modal dentro y fuera

Desencadenar el modal vía data- *

Agrega data-toggle = “modal” y data-target = “# modalID” a cualquier elemento. Para los elementos <a>, omite data-target y usa href = “# modalID” en su lugar:

Ejm

<!– Buttons –>
<button type=”button” data-toggle=”modal” data-target=”#myModal”>Open Modal</button><!– Links –>
<a data-toggle=”modal” href=”#myModal”>Open Modal</a><!– Other elements –>
<p data-toggle=”modal” data-target=”#myModal”>Open Modal</p>

Ejm 2

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Modal Example</h2>
  <!-- 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 fade" 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">×</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>
  
</div>

</body>
</html>

Disparador a través de JavaScript

Habilitar manualmente con:

Ejm

$("#myModal").modal()

Ejm

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Activate Modal with JavaScript</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-primary" id="myBtn">Open Modal</button>

  <!-- The Modal -->
  <div class="modal fade" 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">×</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>
  
</div>

<script>
$(document).ready(function(){
  $("#myBtn").click(function(){
    $("#myModal").modal();
  });
});
</script>

</body>
</html>

Opciones modal

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agrega el nombre de la opción a data-, como en data-backdrop = “”.

Nombre Tipo Por defecto Descripción
backdrop booleano o la cadena “estática true Especifica si el modal debe tener una superposición oscura:

verdadero – superposición oscura
falso: sin superposición (transparente)

Si especifica el valor “estático”, no es posible cerrar el modal al hacer clic fuera de él
keyboard boolean true Especifica si el modal se puede cerrar con la tecla de escape (Esc):

verdadero: el modal se puede cerrar con Esc
falso: el modal no se puede cerrar con Esc
show boolean true Especifica si se debe mostrar el modal cuando se inicializa

Métodos modal

La siguiente tabla lista todos los posibles métodos modal

Método Descripción
.modal(opciones) Activa el contenido como modal. Ver opciones anteriores para valores válidos
.modal(“toggle”) Alterna el modal
.modal(“show”) Abre el modal
.modal(“hide”) Oculta el modal

Eventos modal

La siguiente tabla lista los posibles eventos modal

Evento Descripción
show.bs.modal Ocurre cuando el modal está a punto de mostrarse
shown.bs.modal Se produce cuando el modal se muestra completamente (después de que se hayan completado las transiciones CSS)
hide.bs.modal Ocurre cuando el modal está a punto de ocultarse
hidden.bs.modal Se produce cuando el modal está completamente oculto (después de que se hayan completado las transiciones CSS)