创建 Bootstrap 模态时,.modal-backdrop 被添加到 HTML 的末尾以创建背景颜色。我可以通过更改该类的颜色来手动切换颜色,但是我想根据触发了 2 个模式中的哪一个来切换该类的颜色。
我目前正在使用同级选择器来尝试区分我想要的颜色,但无论调用哪种模式,它现在都显示 #000。
CSS:
.modal-backdrop {
background-color: #fff;
}
.card-modal ~ .modal-backdrop {
background-color: #000;
}
最佳答案
$(".modal1").on('shown.bs.modal', function() {
$('.modal-backdrop').css('background', 'red');
});
$(".modal1").on('hidden.bs.modal', function() {
$('.modal-backdrop').css('background', '#000');
});
.wrap {
padding: 15px;
}
h1 {
font-size: 28px;
}
h4,
modal-title {
font-size: 18px;
font-weight: bold;
}
.no-borders {
border: 0px;
}
.body-message {
font-size: 18px;
}
.centered {
text-align: center;
}
.btn-primary {
background-color: #2086c1;
border-color: transparent;
outline: none;
border-radius: 8px;
font-size: 15px;
padding: 10px 25px;
}
.btn-primary:hover {
background-color: #2086c1;
border-color: transparent;
}
.btn-primary:focus {
outline: none;
}
.model1 .modal-backdrop {
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="wrap">
<h1>Bootstrap Modal Example</h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal1">
Modal 1
</button>
</div>
<div class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- Modal Content: begins -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header no-borders">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="gridSystemModalLabel"></h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p class="body-message centered"><strong>Modal 1 here.</strong>
</p>
</div>
</div>
<!-- Modal Content: ends -->
</div>
</div>
<!---------------------->
<div class="wrap">
<h1>Bootstrap Modal Example</h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal2">
Modal 2
</button>
</div>
<div class="modal fade modal2" tabindex="-1" role="dialog" aria-labelledby="modal2" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- Modal Content: begins -->
<div class="modal-content">
<!-- Modal Body -->
<div class="modal-body">
<div class="body-message">
<h4>Modal 2 here.</h4>
<p>How to change this background colour?</p>
</div>
</div>
</div>
<!-- Modal Content: ends -->
</div>
</div>
更新
Bootstrap 模态的属性:
shown.bs.modal
当您的模式打开时触发hidden.bs.modal
当您的模式关闭时触发
我正在做的是,每当您尝试打开 Bootstrap 模型时,都会添加一个带有类 modal-backdrop 的 div,我只是将该背景的颜色更改为您喜欢的任何颜色。每当您尝试删除您的模型时,该 div 将被删除。所以你每次都需要管理它。根据您的要求,如果您有两个以上的模型,那么每个模型的颜色都应该不同(至少我的解释是这样)。
关于jquery - 如何更改 2 个不同的 Bootstrap Modals 的背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41169820/