Bootstrap | Complemento modal
El componente modal de bootstrap es un cuadro de diálogo que aparece en la pantalla. Contiene el contenido como el título, el texto, los botones, etc. Es fácil de usar y flexible para mostrar contenido en una aplicación web. Además, puede alterar su apariencia para adaptarse al estilo de su aplicación.
Este artículo te guiará sobre:
- ¿Qué es un complemento modal??
- Cómo crear un modal en bootstrap?
- Cómo ajustar el tamaño modal en bootstrap?
¿Qué es un complemento modal??
El complemento modal utiliza JavaScript o atributos de datos para abrir o ocultar el contenido según sea necesario. Más específicamente, es un cuadro de diálogo o un cuadro emergente que se muestra en la parte superior de la página.
Cómo crear un modal en bootstrap?
Para crear un modal en Bootstrap, siga los pasos mencionados.
Paso 1: cree un botón para activar el modal
Primero, cree un botón que activa la ventana modal usando el botón o los elementos de enlace. Los principales atributos utilizados dentro de este elemento son "toggle de datos" y "objetivo". Para hacerlo, consulte las siguientes instrucciones:
- El elemento del botón se crea usando el "btn","btn-primario", y "btn-lg"Clases.
- Especifica el "toggle de datos"Atributo que abre la ventana modal.
- "objetivo"Señala la identificación del modal.
Aquí está el código HTML:
Producción
Paso 2: crear una ventana modal
La ventana modal se crea siguiendo los pasos:
- Agrega un ""Elemento y asignarlo la identificación. Esta identificación debe coincidir con el "objetivo"Valor del atributo. En nuestro caso, "demomodal"Se especifica como la identificación del contenedor.
- "modal"La clase resalta y reconoce el contenido del DIV como un modal.
- "desteñirLa clase aplica el efecto de transición de desvanecimiento y desvanecimiento a la ventana modal. Puede eliminar fácilmente esta clase si no lo desea.
- "dialog modalLa clase ajusta el ancho y el margen del diálogo modal. El contenido del modal se especifica dentro del contenedor creado.
Aquí está la implementación del escenario mencionado anteriormente:
Paso 3: Especifique el contenido modal
El contenido del modal se especifica en el contenedor Div que tiene clase "dialog modal". Los pasos a continuación se implementan para agregarle contenido:
- Primero, agregue un ""Elemento con la clase"contenido modal".
- Dentro de esto, cree un encabezado, un cuerpo y un pie de página usando las clases "encabezador modal","cuerpo modal", y "pie modal".
- Dentro del encabezado, especifique un botón de cierre y el título usando el "modal" clase.
- Luego, especifique la parte del cuerpo utilizando el "cuerpo modal" clase.
- Después del encabezado y el cuerpo, cree un pie de página aplicando el "pie modal" clase. La parte del pie de página contiene el botón que cerrará la ventana modal:
Linuxhint
Linuxhint es el mejor sitio web tutorial.
Producción
Cómo ajustar el tamaño modal en bootstrap?
El tamaño de la ventana modal se puede determinar utilizando el "modal-*"Clase, donde el asterisco"*"El símbolo indica el tamaño de la ventana modal.
Ventana modal pequeña
En el siguiente ejemplo, el ""Elemento tiene clase"dialog modal"Se le asigna una clase"modal-SM":
Como resultado, la ventana modal se abrirá en un tamaño pequeño:
Gran ventana modal
Ahora, la clase "modal-lg"Se especifica para abrir la ventana modal en gran tamaño:
Producción
Eso se trata del complemento modal.
Conclusión
Para crear un modal en Bootstrap, primero, cree un botón o enlace que active el modal. Luego, cree la ventana modal usando la clase "modal" y "dialog modal". Dentro del contenedor, especifique el contenido del modal utilizando el "contenido modal". Utilizar el "modal","cuerpo modal", y "pie modal"Clases para agregar el título del modal, el cuerpo modal y el pie de página de Modal. Esta publicación ha explicado qué es un complemento modal y cómo crearlo.