當已經顯示另一個背景時，將不透明度0設置爲模式背景

Question

我在我的應用中使用BlockUI插件來在執行某些操作時阻止用戶屏幕。有時，當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

一般兄弟選擇器選擇所有屬於指定元素的兄弟元素。

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>