web-dev-qa-db-fra.com

Comment faire un dialogue modal avec un arrière-plan flou en utilisant Twitter Bootstrap?

Bootstrap utilise un blackout lorsqu'il affiche une boîte de dialogue modale. Comment créer un effet de flou sur tout l'arrière-plan?

twitter-bootstrapbootstrap-modalblur
24
eugenes

Vous devez d'abord modifier la structure de votre document. Ça devrait ressembler a quelque chose comme ca

<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>

Et puis 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);
}
41
lucian

Si vous utilisez le bootstrap, votre contenu est déjà dans une sorte de conteneur. Donc, cela fonctionne pour moi sans avoir besoin de modifier le HTML ou tout autre JS supplémentaire:

.modal-open .container-fluid, .modal-open  .container {
    -webkit-filter: blur(5px) grayscale(90%);
}
22
Gabriel Bratescu

Je pense que le moyen le plus simple d'y parvenir est d'appliquer une classe blur aux éléments d'arrière-plan à l'aide de jQuery lorsque le modal est ouvert. Supprimez blur lorsque le modal est fermé ...

.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;
}

http://bootply.com/74705

7
Zim

Pour moi, la solution suivante fonctionne bien

.modal-open .container-fluid, .modal-open  .container {
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}
0
Sachin from Pune