webentwicklung-frage-antwort-db.com.de

Wie erstelle ich mit Twitter Bootstrap einen modalen Dialog mit Hintergrundunschärfe?

Bootstrap verwendet Blackout, wenn der modale Dialog angezeigt wird. Wie mache ich einen Unschärfeeffekt auf den gesamten Hintergrund?

24
eugenes

Sie müssen zuerst die Struktur Ihres Dokuments ändern. Es sollte ungefähr so ​​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);
}
41
lucian

Wenn Sie Bootstrap verwenden, befindet sich Ihr Inhalt bereits in einem Container. Das funktioniert also bei mir, ohne dass HTML oder ein zusätzlicher JS geändert werden muss:

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

Ich denke, der einfachste Weg, dies zu erreichen, besteht darin, eine blur -Klasse mit jQuery auf Hintergrundelemente anzuwenden, wenn das Modal geöffnet ist. Entferne blur, wenn das Modal 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;
}

http://bootply.com/74705

7
Zim

Für mich funktioniert die folgende Lösung einwandfrei

.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