Cómo peinar el modal de bote

La ventana emergente se refiere a la pequeña ventana en la pantalla de la ventana existente. Se utiliza para mostrar información adicional o nueva en cualquier aplicación. A veces, también se conoce como anuncio. Bootstrap proporciona muchas clases que ayudan a crear ventanas modales fácilmente. Sin embargo, con CSS, la ventana modal se puede diseñar de acuerdo con sus gustos.

Este artículo describirá cómo diseñar el modal de bootstrap.

Cómo peinar el modal de bote?

Para aprender a diseñar el modal de bootstrap, siga los pasos a continuación.

Paso 1: crear un archivo HTML

Primero, cree un modal siguiendo las instrucciones a continuación:

• Crear un ""Contenedor y asignarlo una clase"contenedor principal".
• Luego, agregue un botón que active la ventana modal. Asignarlo el "btn","btn-primario", y "show-modal"Clases. Establezca los atributos de datos "toggle de datos"Con el valor"modal" y el "objetivo" con el "#Mymodal" valor. Esta identificación apunta a la identificación de la ventana modal.
• A continuación, cree la ventana modal. Para hacerlo, agregue un ""Elemento y asignarlo"modal" y "desteñirClases y establecer la identificación.
• Agrega un ""Para el cuadro de diálogo del modal y asignarlo el"dialog modal" clase.
• Luego, especifique el contenido del modal en un "" y asigna la clase "contenido modal".
• Haga un botón de cierre con la clase "cerca". El "de datos de datosEl atributo se utiliza para cerrar la ventana modal.
• Luego, especifique el cuerpo modal con las clases "cuerpo modal" y "fila". Dentro de él, tome una columna de 6 cuadrículas para la imagen y 6 para el contenido.
• La imagen está incrustada usando el "" etiqueta.
• Entonces, dentro del ""Elemento con el"contenidoClase, agregue el título, el subtítulo y la descripción.
• Después de eso, coloque un botón con el bootstrap "btn","BTN-Danger", y "P-2"Clases:

ver modal




×

Oferta especial

20% de descuento en comida para llevar y entrega

Best Camisas de calidad. Cada tamaño está disponible. Fácilmente lavable.

VER MÁS

Paso 2: Clase de estilo "Main-Modal-Container"

Todo el contenedor está diseñado con el CSS "Familia tipográfica" propiedad:

.principal-contenedor
Font-Family: 'Poppins', Sans-Serif;

Paso 3: Clase de estilo "Show-Modal"

El "show-modalLa clase se declara con las siguientes propiedades:

.contenedor principal .show-modal
Color: #fff;
Color de fondo: #3A97C9;
Texto-transformación: capitalizar;
relleno: 10px 15px;
Margen: 80px Auto 0;
bloqueo de pantalla;

Aquí:

• "color"Establece el color de la fuente.
• "color de fondo"Establece el color de fondo del elemento.
• "transformación de texto"Capitaliza el texto.
• "relleno"Ajusta el espacio alrededor del contenido del elemento.
• "margen"Produce espacio alrededor del elemento.
• "mostrar"Con el valor"bloquear"Establece el ancho del elemento al 100%.

Paso 4: Clase de estilo "Dialog modal" de estilo en Fade

.modal.desteñir .Dialog modal
transformar: escala (0);
Transición: los 450 ms cúbicos-bezier (.47, 1.64, .41, .8);

Cuando el modal se desvanece, las siguientes propiedades de CSS se aplican al "dialog modal" clase:

• "transformar"Propiedad con el"escala()"El valor aumenta o disminuye el tamaño del elemento vertical u horizontalmente.
• "transición"Mueve gradualmente el elemento. El "cúbico-bezier ()La función aplica la curva de Bezier cúbica. Está determinado por cuatro puntos.

Paso 5: Clase de estilo "Dialog modal" en el programa

.modal.espectáculo .Dialog modal
transformación: escala (1);

El CSS "transformar"Propiedad con el valor"escala (1)"Aumenta el tamaño del cuadro de diálogo.

Paso 6: Clase de estilo "Contente modal" de estilo

.contenedor principal .dialog modal .contenido modal
Radio fronterizo: 30px;
borde: ninguno;
desbordamiento: oculto;

El "contenido modal"Está decorado con las siguientes propiedades:

• "radio fronterizo"Ronda los bordes del elemento.
• "borde"Con el valor"ningunoPonte el borde.
• "Desbordamiento"Controla el flujo del contenido.

Paso 7: Clase de estilo "Cerrar"

.contenedor principal .dialog modal .contenido modal .cerca
Color: #747474;
Color de fondo: RGBA (255, 255, 255, 0.5);
Altura: 27px;
Ancho: 27px;
relleno: 0;
Opacidad: 1;
desbordamiento: oculto;
Posición: Absoluto;
Derecha: 15px;
Arriba: 15px;
índice z: 2;

Aquí:

• "opacidad"Define el nivel de transparencia del elemento.
• "posición"Con el valor"absoluto"Establece la posición del elemento en relación con su posición principal.
• "bien" y "arriba"Establezca espacio a la derecha y la parte superior del botón Cerrar.
• "índice z"Especifica el orden de la pila del elemento. El orden de pila mayor lleva el elemento al frente.

Paso 8: Clase de estilo "Modal-Body"

.contenedor principal .dialog modal .contenido modal .cuerpo modal
relleno: 0 !importante;

El espacio alrededor de todo el cuerpo modal es ajustado por CSS "relleno" propiedad. Además, el "!importanteSe utiliza la palabra clave para establecer la importancia del elemento.

Paso 9: Elemento de estilo "IMG"

.contenedor principal .dialog modal .contenido modal .cuerpo modal .img de imagen modal
Altura: 100%;
Ancho: 100%;

Paso 10: diseñe la clase de "contenido"

.contenedor principal .dialog modal .contenido modal .cuerpo modal .contenido
relleno: 35px 30px;

Usando el "relleno"Propiedad, el espacio se agrega alrededor del"contenido"Contenido de la clase.

Paso 11: Clase de estilo "Título" de estilo

.contenedor principal .dialog modal .contenido modal .cuerpo modal .título
Color: #FB3640;
Font-Familia: 'Sacramento', cursiva;
tamaño de fuente: 35px;

Aquí:

• "Familia tipográfica"Define el estilo de la fuente.
• "tamaño de fuente"Establece el tamaño de la fuente.

Paso 12: Clase de estilo "Subtítulo"

.contenedor principal .dialog modal .contenido modal .cuerpo modal .subtítulo
Font-peso: 600;
Texto-transformación: upcase;
margen: 0 0 20px;
bloqueo de pantalla;

Según el fragmento de código dado:

• "pescado"Establece el grosor de la fuente.
• "transformación de texto"Establece el caso de fuente.

Producción

Así es como puedes diseñar el modal de bootstrap.

Conclusión

Para peinar la ventana modal de bootstrap, primero, agregue el botón que activará el modal. Luego, haga la ventana modal con elementos HTML. Después de eso, agregue varias propiedades de CSS, que incluyen "relleno","margen","color","transición", Y muchos más para diseñar la ventana modal. Más específicamente, el "bisero cúbicoLa función se utiliza para aplicar el efecto de transición en una curva de cuatro puntos en la ventana modal. Esta publicación ha explicado el procedimiento para diseñar el modal de bootstrap.