Modal es uno de los componentes de Bootstrap 4 creado con HTML , CSS y JavaScript y es un complemento de JavaScript ligero y receptivo que se usa para agregar cuadros de diálogo, notificaciones de usuario, cajas de luz o simplemente contenido personalizado al sitio.
Modo de arranque
Puntos importantes a recordar:
- Bootstrap admite solo un modal por ventana, y anidarlos se considera una mala práctica.
- Al hacer clic en el fondo del modal, se cerrará instantáneamente el modal.
- Los modales deben colocarse antes de cualquier otro contenido en el documento y eliminan el desplazamiento del cuerpo, por lo que cuando desplazamos el contenido del modelo, desplácese.
- La razón por la que necesitamos colocar modal en la parte superior antes de cualquier otro contenido es porque hace uso de position: fixed, lo que podría causar interferencia con otros elementos.
- Los modales no admiten el atributo de enfoque automático de HTML, por lo que podemos usar JavaScript personalizado en su lugar.
Diferentes componentes de modal:
| Desplazamiento | Si el contenido colocado dentro del modal se vuelve más largo que la ventana gráfica de los usuarios, se desplazan independientemente de la página dentro. |
| Centro vertical | Agregamos .modal-dialog-centered a .modal-dialog cuando queremos centrar verticalmente el modal. |
| Información sobre herramientas y ventanas emergentes | Cuando los modales están cerrados, cualquier información sobre herramientas y ventanas emergentes también se descartarán automáticamente. |
| Usando las cuadrículas | Podemos usar la cuadrícula de arranque dentro del modal anidando el contenedor-fluido dentro de la clase modal-body. |
| Contenido modal variable | Podemos usar los atributos event.relatedTarget y HTML data-* (a través de jQuery) para variar el contenido del modal según el modal que se activó. |
| Eliminar animación | Para los modales que simplemente aparecen en lugar de desaparecer, podríamos eliminar la clase .fade del marcado modal. |
| Alturas dinámicas | Si la altura de un modal cambia mientras se activa, para reajustar la posición del modal en caso de que aparezca una barra de desplazamiento, podríamos llamar a $(‘#myModal’).modal(‘handleUpdate’). |
| Opciones de tamaño | Los modales tienen dos tamaños opcionales, es decir, modal-lg y modal-sm. |
| Accesibilidad | Para la accesibilidad del componente modal, debemos asegurarnos de agregar role = «dialog» y aria-labelledby = «…», así como hacer referencia al título modal a .modal, y role = «document» a .modal -diálogo en sí mismo. |
| Incrustación de vídeo de YouTube | Incrustación de videos de YouTube: la incrustación de videos de YouTube en modales requiere JavaScript adicional que no está en Bootstrap para detener automáticamente la reproducción y más. |
Pasos simples para crear un modal:
- Crea un botón disparador.
- Crear un componente modal
Ejemplo 1: Crear un modal simple básico.
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Modal Example!</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <br> <br> <center> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal"> Geeksforgeeks! </button> </center> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"> Title over here! </h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> All the content! </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button> <button type="button" class="btn btn-primary"> Save changes </button> </div> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: Crear modal usando sus diferentes componentes.
HTML
<!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://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <br> <br> <center> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal" data-whatever="@geeksforgeeks1"> Open modal for @geeksforgeeks1 </button> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal" data-whatever="@geeksforgeeks2"> Open modal for @geeksforgeeks2 </button> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal" data-whatever="@geeksforgeeks3"> Open modal for @geeksforgeeks3 </button> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"> New message from geeks for geeks! </h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <p>Vertically centered, varying modal content & scrolling components are used!</p> </div> <div class="form-group"> <label for="message-text" class="col-form-label"> Message: </label> <p> geeksforgeeks is a computer science portal for geeks. It contains millions of articles on various topics from interview preparation, to a small topic or a subject. It provides various opportunities for anyone who wants to get hired. It's considered as one of the best platform for anyone who want to gain or share their knowledge and skills. The top achievements of geeksforgeeks includes billions of users all over the world. Millions of articles have already been published, and thousands of people getting Hired by some of the top companies with their numbers still growing. </p> <br> <p> Geeksforgeeks contains articles from old topics to new, and provides with a variety of services for you to learn, succeed and also to enjoy the process! Free tutorials and millions of articles are being provided over here, the live, Online and Classroom Courses are being provided. Frequent coding competition and webinars by industry experts as well as internship opportunities and job Opportunities are available. </p> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary"> Save message </button> </div> </div> </div> </div> </center> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pateljkhushbu y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA