12
Bootstrap verwendet Blackout, wenn es modalen Dialog zeigt. Wie mache ich Unschärfe-Effekte auf den gesamten Hintergrund?Wie mache ich einen modalen Dialog mit Hintergrundunschärfe mit Twitter Bootstrap?
A
Antwort
29
Sie müssen zuerst die Struktur Ihres Dokuments ändern. Es sollte dieses etwas aussehen
<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>
Und dann in 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);
}
4
Ich denke, der einfachste Weg, dies zu erreichen, ist eine blur Klasse Hintergrundelemente anwenden jQuery verwenden, wenn die modale geöffnet ist. Entfernen blur, wenn die modale geschlossen ist ...
.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;
}
6
Wenn Sie Bootstrap verwenden dann Ihre Inhalte bereits in irgendeiner Art von Behälter ist. So funktioniert das für mich ohne die Notwendigkeit oder zusätzliche JS verändern HTML kann:
.modal-open .container-fluid, .modal-open .container {
-webkit-filter: blur(5px) grayscale(90%);
}
+0
das ist die beste Lösung. –
+0
Dies ist der Effekt, nach dem ich suche! Danke, Mann! –
+0
Ich habe dieses versucht, aber nicht wirklich den Trick (ich verwende React und React Bootstrap). Was ich getan habe basierend auf Ihrer Antwort und arbeitete für mich: 'body.modal-open #root { -webkit-filter: Unschärfe (5px) Graustufen (90%); } ' –
aber funktioniert nicht in MSIE 9 und Firefox. – eugenes
Es gibt eine Möglichkeit, es in IE und Firefox detailliert zu machen [hier] (http://stackoverflow.com/a/15813429/1563940). Ich weiß jedoch nicht genau, ob es funktioniert. – lucian
Wenn das modale Innencontainer? – lifecom