我有一个页面,其中一个引导模态打开另一个模态。
问题是,对于每个打开的模态,它添加
<div class="modal-backdrop fade in"></div>
到HTML代码。这是很好的第一个,但因为它是opacity: .5;
,然后使页面黑暗的每一个模式打开。是否有一种方法来检查是否一个modal-backdrop
已经存在,在这种情况下不打开另一个?
我用either打开情态动词
<a href="" data-target="#modal_01" data-toggle="modal">Modal</a>
或使用jQuery:
$('#modal_01').modal('show');
对这个问题的任何帮助都是非常感激的!
这里有一个方便您的小提琴:https://jsfiddle.net/zsk4econ/1/
让CSS处理。
.modal-backdrop:nth-child(2n-1) {
opacity : 0;
}
https://jsfiddle.net/zsk4econ/3/以下是我认为适合您的工作演示。
$(".modal").on("shown.bs.modal", function () {
if ($(".modal-backdrop").length > 1) {
$(".modal-backdrop").not(':first').remove();
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal3">Open Modal 3</button>
</div>
</div>
</div>
</div>
</div>
您可以根据需要添加/删除data- background ="false"属性。除此之外,你还可以添加像
这样的css.modal-backdrop+.modal-backdrop {
opacity : 0;
}
$(document).on('show.bs.modal', '.modal', function () {
if ($(".modal-backdrop").length > -1) {
$(".modal-backdrop").not(':first').remove();
}
});
// Make sure only one backdrop is rendered
$(document).on('show.bs.modal', '.modal', function () {
if ($(".modal-backdrop").length > 1) {
$(".modal-backdrop").not(':first').remove();
}
});
// Remove all backdrop on close
$(document).on('hide.bs.modal', '.modal', function () {
if ($(".modal-backdrop").length > 1) {
$(".modal-backdrop").remove();
}
});