Установите непрозрачность 0 на модальный фон, если уже установлен другой фон

Question

Я использую плагин в своем приложении для блокировки экрана пользователя при выполнении какого-либо действия. В некоторых случаях, когда используется модуль blockUI, мода загружается с модальным фоном, который делает фон темнее.

$.fn.myBlockUI = function() { 
    var loader = $('#img-loader'); 

    .blockUI({ 
     message: loader, 
     css: { 
      border: 'none', 
      padding: '5px', 
      'background-color': 'transparent', 
      '-webkit-border-radius': '10px', 
      '-moz-border-radius': '10px', 
      opacity: .6, 
      color: '#fff', 
      cursor: 'wait' 
     } 
    }); 
} 

Это моя функция, которую я добавляю к призыву ajax по адресу beforeSend.

$.fn.myBlockUI = function() { 
    var loader = $('#img-loader'); 

    $('.modal').on('shown.bs.modal', function(e) { 
     $(".modal-backdrop").addClass('modal-backdrop-no-background'); 
    }); 
    $('.modal').on('hidden.bs.modal', function(e) { 
     $(".modal-backdrop").removeClass('modal-backdrop-no-background'); 
    }); 

    $.blockUI({ 
     message: loader, 
     css: { 
      border: 'none', 
      padding: '5px', 
      'background-color': 'transparent', 
      '-webkit-border-radius': '10px', 
      '-moz-border-radius': '10px', 
      opacity: .6, 
      color: '#fff', 
      cursor: 'wait' 
     } 
    }); 
} 

Это мое «решение», которое сейчас не работает. Я думал, когда я вызываю эту функцию, добавьте класс с opacity : 0, чтобы удалить один фон, но это не работает.

Answer 1

General Sibling Selector выбирает все элементы, являющиеся братьями и сестрами определенного элемента.

element ~ element {...} 

Пример:

.modal-backdrop { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 1040; 
 
    background-color: #000; 
 
    opacity: 0.5; 
 
} 
 

 

 
.modal-backdrop ~ .modal-backdrop { 
 
    display: none; 
 
}

<div class="modal-backdrop"></div> 
 
<div class="modal-backdrop"></div> 
 
<div class="modal-backdrop"></div>