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?

twitter-bootstrapbootstrap-modalblur
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
Gabriel Bratescu

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
Sachin from Pune