我在我的应用程序中使用 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'
}
});
}
这是我添加到 beforeSend
上的 ajax 调用的函数。
$.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
调用这个函数时添加类来删除一个背景,但这不起作用。
最佳答案
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>
关于jquery - 当另一个背景已经显示时,将不透明度 0 设置为模态背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30077513/