当另一个背景已经显示时，将不透明度 0 设置为模态背景

Question

我在我的应用程序中使用 BlockUI 插件来在执行某些操作时阻止用户屏幕。有时在使用 blockUI 时 bootstrap 模态打开时使用模态背景使背景更暗。

$.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'
        }
    });
}

这是我的 "solution"，现在无法使用。我想当我调用这个函数时添加 class 和 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>

当另一个背景已经显示时，将不透明度 0 设置为模态背景

Set opacity 0 to modal-backdrop when another background already shown

html

css

jquery

blockui

twitter-bootstrap