Wie ändere ich die Hintergrund-Opazität, wenn das Bootstrap-Modal geöffnet ist?

Question

Ich verwende Bootstrap-Modal. Wenn Modal geöffnet ist, wird die Hintergrund-Deckkraft nicht standardmäßig geändert. Ich habe versucht, in js Ändern

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

}

Verwendung Das funktioniert aber, wenn modal geschlossener Opazität Stil bleibt für das pagecontent noch ist. Aber ich bin mir sicher, dass dies nicht der richtige Weg ist. Jede Hilfe wird geschätzt. Vielen Dank. Html-Taste, die Modal öffnet, ist

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

Modal-Code

<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> 

EDIT ist:

Answer 1

Ich gehe davon aus Sie die Opazität des modalen Hintergrund festlegen möchten .. .

Stellen Sie die Deckkraft über ein CSS

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

!important verhindert, dass die Opazität überschrieben werden - vor allem aus Bootstrap in diesem Zusammenhang.

Answer 2

Sie den Modal-Hintergrund Opazität in Ihrem Stylesheet überschreiben [Anmerkung der .in Klasse nehmen]

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

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

Answer 3

Sie könnten Bootstrap events nutzen :: als

//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 }); 
}) 

Answer 4

Nach einem Tag des Kampfes habe ich herausgefunden, Höhe: 100% zu .modal-backdrop.in Klasse gearbeitet. Höhe: 100% gemacht Opazität, um die ganze Seite anzuzeigen.

Answer 5

Die Einstellung der Höhe auf 100% wird nicht die Lösung sein, wenn Sie eine Hintergrundseite haben, deren Höhe sich über die Browserhöhe hinaus erstreckt.

Wenn Sie Bhargavis Antwort hinzufügen, ist dies 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%; 
} 

Answer 6

Wenn Sie die weniger Version verwenden @ modal-Hintergrund-Opazität in Ihren Variablen zu kompilieren Bootstrap ändern Datei $ modal-Hintergrund-Opazität für SCSS außer Kraft setzen.

Answer 7

Das Problem beim Überschreiben mit !important ist, dass Sie den Einblendeffekt verlieren.

So ist der tatsächliche beste Trick den Modal-Hintergrund Opazität zu ändern, ohne die fadeIn Wirkung zu brechen und ohne die schamlosen!important zu verwenden ist, diese zu verwenden:

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

@sass

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

Einfach und sauber.

Answer 8

Verwendung dieser Code

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

Answer 9

Nur falls jemand mit Bootstrap 4. Es scheint, dass wir nicht mehr .modal-backdrop.in verwenden können, aber jetzt .modal-backdrop.show verwenden. Fade-Effekt erhalten.

.modal-backdrop.show { 
    opacity: 0.7; 
}