2013-10-24 8 views

risposta

29

È necessario modificare prima la struttura del documento. Dovrebbe essere qualcosa di simile

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

E poi nel 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); 
} 
+0

ma non funziona in MSIE 9 e Firefox. – eugenes

+1

C'è un modo per farlo funzionare in IE e Firefox dettagliati [qui] (http://stackoverflow.com/a/15813429/1563940). Non so per certo che funzioni, comunque. – lucian

+0

Se il modale all'interno del contenitore? – lifecom

4

Penso che il modo più semplice per raggiungere questo obiettivo è quello di applicare una classe blur per elementi di sfondo utilizzando jQuery quando il modale è aperta. Rimuovere blur quando il modal è chiuso ...

.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

6

Se si utilizza boostrap quindi il contenuto è già in una sorta di contenitore. Quindi questo funziona per me, senza la necessità di modificare può HTML o JS aggiuntivi:

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

questa è la soluzione migliore. –

+0

Questo è l'effetto che sto cercando! Grazie uomo! –

+0

Ho provato questo, ma non ho fatto il trucco (sto usando React and React Bootstrap). Quello che ho fatto in base alla tua risposta e ha funzionato per me: 'body.modal-open #root { -webkit-filter: sfocatura (5px) in scala di grigi (90%); } ' –