En esta ocasión, vamos a aprender cómo modificar la opacidad del modal en Boostrap. El modal es un pop-up totalmente responsive que pone el fondo más oscuro para darle mayor atención al pop-up.
¿Qué es Boostrap? ¿Qué es un modal?
Bootstrap es un framework que te da la estructura base para poder desarrollar páginas web responsive. Incluye muchas funcionalidades, como el modal, así como templates predefenidos a través de CSS.
El modal es un pop-up, que oscurece el resto del fondo para dar mayor contraste. Lo que ocurre es que muchas veces queremos modificar la opacidad. Esto debe realizarse a través de CSS, como indicamos debajo.
Modificar la opacidad del modal con CSS
La propiedad de CSS que vamos a utilizar es opacity. Esta varía de 0 a 1, o en el caso de la propiedad filter de 0 a 100. A mayor el número, más opaco es, y a menor el número, más transparente es.
En la versión actual de Bootstrap 4, podemos modificar la opacidad con el siguiente código de CSS. El elemento que modificamos es .modal-backdrop.show.
.modal-backdrop.show {
opacity: .8;
filter: alpha(opacity=80); /* Para versiones anteriores de IE */
}
En el caso de la versión anterior: Bootstrap 3, debemos modificar el elemento .modal-backdrop.in, de esta manera:
.modal-backdrop.in {
opacity: .8;
filter: alpha(opacity=80); /* Para versiones anteriores de IE */
}
En el caso que deseamos que no haya ningun color de fondo, debemos colocar 0. Por otro lado, si queremos que el fondo sea totalmente negro, entonces ponemos 1 (o 100 para filter).
Si tienes alguna duda, por favor no dudes en dejarnos un comentario. Así podremos ayudarte y a cualquier persona que tenga la misma pregunta.
