horizontally - ¿Cómo hacer un diálogo modal con fondo borroso usando Twitter Bootstrap?
modal blur bootstrap (3)
Creo que la forma más fácil de lograr esto es aplicar una clase de blur a los elementos de fondo usando jQuery cuando el modal está abierto. Eliminar el blur cuando el modal está cerrado ...
.blur {
box-shadow: 0px 0px 20px 20px rgba(255,255,255,1);
text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
transform: scale(0.9);
opacity: 0.6;
}
Bootstrap usa el apagón cuando se muestra el diálogo modal. ¿Cómo hago efecto de desenfoque en todo el fondo?
Primero debes modificar la estructura de tu documento. Debería verse algo como esto
<body>
<div class="supreme-container">all your content goes here except for the modal</div>
<div id="myModal" class="modal fade">This is your modal.</div>
</body>
Y luego en css
body.modal-open .supreme-container{
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
}
Si está utilizando boostrap, entonces su contenido ya está en algún tipo de contenedor. Así que esto funciona para mí sin la necesidad de modificar el HTML o cualquier JS adicional:
.modal-open .container-fluid, .modal-open .container {
-webkit-filter: blur(5px) grayscale(90%);
}