我有一个页面,其中一个Bootstrap模态打开另一个模态。
问题是,对于每个打开的模态,它会添加
<div class="modal-backdrop fade in"></div>
到HTML代码。它对第一个很好,但是因为它opacity: .5;
它会使每个模态打开时页面变暗。有没有办法检查modal-backdrop
是否已经存在,并且在这种情况下不打开另一个?
我用
打开我的模态 <a href="" data-target="#modal_01" data-toggle="modal">Modal</a>
或使用jQuery:
$('#modal_01').modal('show');
非常感谢对此问题的任何帮助!
为了您的方便,这里有一个小提琴:https://jsfiddle.net/zsk4econ/1/
答案 0 :(得分:9)
以下是我认为适合您的工作演示。
$(".modal").on("shown.bs.modal", function () {
if ($(".modal-backdrop").length > 1) {
$(".modal-backdrop").not(':first').remove();
}
})
&#13;
<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>
&#13;
答案 1 :(得分:7)
答案 2 :(得分:4)
您可以添加/删除data-backdrop =&#34; false&#34;属性取决于要求。否则你也可以包括像
这样的CSS.modal-backdrop+.modal-backdrop {
opacity : 0;
}
答案 3 :(得分:0)
$(document).on('show.bs.modal', '.modal', function () {
if ($(".modal-backdrop").length > -1) {
$(".modal-backdrop").not(':first').remove();
}
});
答案 4 :(得分:0)
// 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();
}
});