it-swarm.com.de

So ändern Sie die Deckkraft des Hintergrunds, wenn das Bootstrap-Modal geöffnet ist

Ich benutze Bootstrap-Modal. Wenn Modal geöffnet ist, wird die Deckkraft des Hintergrundinhalts standardmäßig nicht geändert. Ich habe versucht, in Js zu wechseln 

function showModal() {
document.getElementById("pageContent").style.opacity = "0.5";

}

Dies funktioniert, aber wenn der Modal geschlossen ist, bleibt der Deckkraftstil für den PageContent erhalten. Ich bin mir jedoch sicher, dass dies nicht der richtige Weg ist. Jede Hilfe geschätzt. Danke . Html-Button, der Modal öffnet

<button class="btn glossy-clear" data-toggle="modal" data-target="#modal-display" onclick="showModal()">Clear</button>

Modal Code ist 

 <div class="modal fade" id="modal-display">
   <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title">Search results</h4>
     </div>
    <div class="modal-body"> 
      <div class="container">
        <div class="row">
          <div class="col-md-5">Hello</div>
          <div class="col-md-5">i!!!!</div>
         </div>
      </div>
     </div>
  </div>
 </div>
</div>

BEARBEITEN:

modal-backdrop div

32
Bhargavi

Ich gehe davon aus, dass Sie die Deckkraft des modalen Hintergrunds einstellen möchten ...

Stellen Sie die Deckkraft über CSS ein

.modal-backdrop
{
    opacity:0.5 !important;
}

!important verhindert, dass die Deckkraft - insbesondere von Bootstrap - überschrieben wird.

70
Hemant

Sie können die Deckkraft des Modal-Hintergrunds in Ihrem Stylesheet überschreiben [notieren Sie sich die .in-Klasse].

.modal-backdrop.in {
    opacity: 0.9;
}

http://jsfiddle.net/ThisIsMarkSantiago/r0gwn005/1/

21

sie könnten bootstrap events :: as verwenden

//when modal opens
$('#yourModal').on('shown.bs.modal', function (e) {
  $("#pageContent").css({ opacity: 0.5 });
})

//when modal closes
$('#yourModal').on('hidden.bs.modal', function (e) {
  $("#pageContent").css({ opacity: 1 });
})
9

Das Problem beim Überschreiben mit !important besteht darin, dass Sie den Effekt - einblenden verlieren.

Der beste Trick, um die Deckkraft des Modal-Hintergrunds zu ändern ohne den FadeIn-Effekt zu unterbrechen und, ohne den Shameless !important zu verwenden, ist Folgendes zu verwenden:

.modal-backdrop{
  opacity:0; transition:opacity .2s;
}
.modal-backdrop.in{
  opacity:.7;
}

@sass

.modal-backdrop{
  opacity:0; transition:opacity .2s;
  &.in{opacity:.7;}
}

Einfach und sauber.

4
biiwop

Die Einstellung der Höhe auf 100% ist nicht die Lösung, wenn Sie eine Hintergrundseite haben, deren Höhe über die Browserhöhe hinausgeht.

Dies ist die Lösung, wenn Sie eine scrollbare Seite im Hintergrund haben.

.modal-backdrop.in
{
    opacity:0.5 !important;
    position:fixed;// This makes it cover the entire scrollable page, not just browser height
    height:100%;
}
2
SoulRayder

Wenn Sie die kleinere Version zum Kompilieren von Bootstrap verwenden, setzen Sie die @ modal-hintergrund-Opazität in Ihren Variablen außer Kraft, indem Sie die Datei $ modal-background-opacity für scss überschreiben.

1

Für den Fall, dass jemand Bootstrap 4 verwendet. Es scheint, dass wir .modal-backdrop.in nicht mehr verwenden können, sondern jetzt .modal-backdrop.show verwenden müssen. Fade-Effekt bleibt erhalten.

.modal-backdrop.show {
    opacity: 0.7;
}
1
Thomas Jensen

Nach einem Tag des Kämpfens habe ich herausgefunden, wie man die Höhe einstellt: 100% bis .modal-Hintergrund. Höhe: 100% gemacht Deckkraft, um ganze Seite zu zeigen.

1
Bhargavi

verwenden Sie diesen Code

$("#your_modal_id").on("shown.bs.modal", function(){
      $('.modal-backdrop.in').css('opacity', '0.9');
});

0

Was für mich funktioniert hat, ich kläre die Deckkraft in .modal.backdrop.in

.modal-backdrop.in{
    filter:alpha(opacity=50);
    opacity:.5
    }

Ändern Sie es in

.modal-backdrop.in{
   }
0
Deepali

Das Hinzufügen von! Important zu .modal-backdrop zerstört den Übergang auf Bootstrap-Modal

Durch das direkte Bearbeiten in bootstrap.min.css habe ich den modalen Overlay-Hintergrund geändert. Diejenigen, die lokal Bootstrap-CSS verwenden (ohne CDN), können den Hintergrundfarbenwert von .modal-backdrop class ändern.

Wenn Sie die Deckkraft der Bootstrap 4-Modal-Overlays ändern möchten, finden Sie diese Klasse .modal-backdrop.show und ändern Sie die Deckkraft in den gewünschten Wert.

Wenn Sie die Überlagerungszeit ändern möchten, fügen Sie den Übergang zu .modal-hintergrund.fade class hinzu

Wenn Sie die Übergangszeit für modale Objektänderungen ändern möchten, ändern Sie die Übergangswerte in .modal.fade .modal-dialog class

0
Shahas Nizar