Как изменить фон Непрозрачность при открытии мода загрузочного мода

Question

Я использую bootstrap modal. Когда модальное является открытым фоном, непрозрачность содержимого по умолчанию не изменяется. Я попытался изменить в JS с помощью

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

}

Это работает, но всякий раз, когда модальный закрыта непрозрачности стиль до сих пор остается для PageContent. Но я уверен, что это неправильный способ сделать. Любая помощь оценивается. Благодарю. Кнопка Html которая открывает модальное

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

Модальные Кодекс

<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

Я предполагаю, что вы хотите установить непрозрачность модального фона .. .

Установите непрозрачность через CSS

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

!important предотвращает непрозрачность от перезаписи - особенно из Bootstrap в этом контексте.

Answer 2

Вы можете переопределить модальную Заставку непрозрачность в таблице стилей [принять к сведению класса .in]

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

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

Answer 3

вы могли бы использовать самозагрузки events :: в

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

После дня борьбы я понял, что высота установки: от 100% до .modal-backdrop.in класс работал. высота: 100% сделана непрозрачность для отображения всей страницы.

Answer 5

Просто установка высоты до 100% не будет решением, если у вас есть фоновая страница, высота которой выходит за пределы браузера.

Добавляя к ответу Бхаргави, это решение, когда у вас есть прокручиваемая страница в фоновом режиме.

.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

Если вы используете меньше версию для компиляции Bootstrap изменить @ модальную-Заставку-непрозрачность в вашем переменных переопределять файл $ модальной-непрозрачность Заставки для СКСА.

Answer 7

Проблема с переопределением с использованием !important заключается в том, что вы потеряете затухание, действующее.

Таким образом, реальный лучший трюк, чтобы изменить модальную непрозрачность Заставки, не нарушая эффект FadeIn и без использования бесстыдной!important является использование этого:

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

@sass

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

Простой и чистый.

Answer 8

использовать этот код

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

Answer 9

Только в случае, если кто-то использует Bootstrap 4. Кажется, что мы больше не можем использовать .modal-backdrop.in, но теперь должны использовать .modal-backdrop.show. Эффект Fade сохраняется.

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