Jak zmienić tło Krycie, gdy otwarty jest mod bootstrap

Question

Używam modala ładowania początkowego. Kiedy modalny jest otwarty, krycie treści w tle nie jest domyślnie zmieniane. Próbuję zmienić w js użyciu

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

}

To działa, ale kiedy modalna jest zamknięty styl krycie nadal pozostaje dla pageContent. Ale jestem pewien, że nie jest to właściwy sposób postępowania. Każda pomoc doceniona. Dzięki. przycisk HTML, który otwiera modalnych jest

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

Kod Modal jest

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

Answer 1

jestem zakładając chcesz ustawić krycie modalnego tle ..

Ustaw przezroczystość za pośrednictwem CSS

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

!important zapobiega zmętnienie przed zastąpieniem - zwłaszcza z Bootstrap w tym kontekście.

Answer 2

Możesz zmienić krycie modal-tło w arkuszu stylów [zwróć uwagę na klasę .in]

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

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

Answer 3

można wykorzystać bootstrap events :: jak

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

Po dniu zmagań zorientowałem się, że wysokość ustawienia: 100% do klasy .modal-backdrop.in działało. height: 100% nieprzezroczystości pokazującej całą stronę.

Answer 5

Po prostu ustawienie wysokości na 100% nie będzie rozwiązaniem, jeśli masz stronę w tle, której wysokość wykracza poza wysokość przeglądarki.

Dodając do odpowiedzi Bhargawi, jest to rozwiązanie, gdy masz przewijaną stronę w tle.

.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

Jeśli używasz mniejszą wersję kompilacji Bootstrap modyfikować @ modalne-backdrop-krycie w zmiennych nadpisać plik $ modalne-backdrop-krycie SCSS.

Answer 7

Problem z nadpisaniem za pomocą !important polega na tym, że utracisz efekt zaniknięcia efektu.

więc rzeczywista najlepszy trik, aby zmienić krycie modal-backdrop bez zerwania efekt fadeIn i bez konieczności korzystania z bezwstydną!important jest użycie w tym:

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

@sass

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

Prosty i czysty.

Answer 8

użyć tego kodu

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

Answer 9

Tylko w przypadku, gdy ktoś korzysta Bootstrap 4. Wydaje się, że nie możemy już używać .modal-backdrop.in, ale musi teraz używać .modal-backdrop.show. Zniknął efekt zanikania.

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