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

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

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

}

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

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

modal-backdrop div

Ответы

Ответ 1

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

Задайте непрозрачность с помощью CSS

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

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

Ответ 2

Вы можете переопределить непрозрачность модального фона в своей таблице стилей (обратите внимание на класс .in)

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

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

Ответ 3

вы можете использовать bootstrap events:: as

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

Ответ 4

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

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

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

@sass

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

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

Если вы используете меньшую версию для компиляции Bootstrap modify @modal-backdrop-opacity в ваших переменных переопределите файл $modal-backdrop-opacity для scss.

Ответ 8

используйте этот код

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

Ответ 9

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

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