Bootstrap utilizza blackout quando mostra la finestra di dialogo modale. Come faccio a rendere l'effetto sfocato su tutto lo sfondo?Come creare una finestra di dialogo modale con sfocatura dello sfondo usando Twitter Bootstrap?
risposta
È 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);
}
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;
}
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%);
}
questa è la soluzione migliore. –
Questo è l'effetto che sto cercando! Grazie uomo! –
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%); } ' –
- 1. Bootstrap su Twitter: come chiudere la finestra di dialogo modale?
- 2. bootstrap css - come creare una modale modale senza influenzare lo sfondo
- 3. Come aprire una finestra modale Bootstrap usando jQuery?
- 4. Come creare una finestra di dialogo modale in WPF?
- 5. Come creare una finestra di dialogo modale in Android
- 6. Come creare una finestra modale con il modello Twig e Twitter-Bootstrap
- 7. La finestra di dialogo modale remota di Bootstrap non funziona
- 8. Come attivare lo sfondo modale Bootstrap?
- 9. twitter bootstrap modal non proprio modale
- 10. jQuery finestra di dialogo modale e finestra di dialogo CKEditor
- 11. Come centralino verticale di Twitter Bootstrap 3 modale?
- 12. Link di fallback per la finestra modale di Twitter BootStrap
- 13. Come creare una finestra di dialogo di conferma modale prima di eliminare con ember-cli
- 14. ri-formato la finestra di dialogo modale in bootstrap dinamicamente
- 15. Blocco del contenuto dello sfondo e messa a fuoco sulla finestra di dialogo modale
- 16. Come implementare correttamente una finestra di dialogo modale in cima a una finestra di dialogo non modale?
- 17. In Twitter Bootstrap, come faccio a separare un evento dalla chiusura di una finestra di dialogo modale?
- 18. Twitter Bootstrap Modal - Sfondo grigio ma senza finestra
- 19. Utilizzo della finestra modale Bootstrap come PartialView
- 20. Bootstrap: in una finestra di dialogo modale, come faccio a espandere il menu a discesa all'esterno della finestra di dialogo?
- 21. Modulo modale Bootstrap di Twitter Invia
- 22. Finestra di dialogo modale mobile jQuery
- 23. Dissolvenza in sovrapposizione nella finestra di dialogo modale
- 24. La finestra modale Bootstrap è disattivata
- 25. Finestra di dialogo Modale JQuery senza sovrapposizione
- 26. Come creare una finestra di dialogo JavaFX?
- 27. Solo modale Bootstrap che mostra lo sfondo
- 28. Come aprire una finestra di dialogo modale nell'applet Java?
- 29. Bootstrap.js - come visualizzare automaticamente una finestra modale?
- 30. Twitter Bootstrap/jQuery - Come impedire temporaneamente la chiusura della modale?
ma non funziona in MSIE 9 e Firefox. – eugenes
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
Se il modale all'interno del contenitore? – lifecom