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 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 |
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) |