twitter-bootstrap Bootstrap 多模态模态背景问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39588698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap multiple modals modal-backdrop issue
提问by user1996496
I have a page where one Bootstrap modal opens another modal.
我有一个页面，其中一个 Bootstrap 模态打开另一个模态。
The problem is that with each opened modal, it adds
问题是，随着每个打开的模态，它添加
<div class="modal-backdrop fade in"></div>
<div class="modal-backdrop fade in"></div>
to the HTML code. It's fine for the first one, but since it's opacity: .5;it then makes the page darker on every modal opened. Is there a way to check if a modal-backdropalready exists and in that case not open another one?
到 HTML 代码。第一个没问题，但既然是opacity: .5;这样，那么每个打开的模态页面都会变暗。有没有办法检查一个是否modal-backdrop已经存在，在这种情况下不打开另一个？
I open my modals with either
我打开我的模态
<a href="" data-target="#modal_01" data-toggle="modal">Modal</a>
<a href="" data-target="#modal_01" data-toggle="modal">Modal</a>
or with jQuery:
或使用 jQuery：
$('#modal_01').modal('show');
$('#modal_01').modal('show');
Any help to this problem is greatly appreciated!
非常感谢对此问题的任何帮助！
Here's a fiddle for your convenience: https://jsfiddle.net/zsk4econ/1/
为了您的方便，这里有一个小提琴：https: //jsfiddle.net/zsk4econ/1/
回答by Anil Panwar
Here is the working demo that I think will fit in your case.
这是我认为适合您的情况的工作演示。
$(".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>回答by cjmling
Let CSS handle it.
让 CSS 来处理。
.modal-backdrop:nth-child(2n-1) {
opacity : 0;
}
回答by AB Udhay
You can add/remove data-backdrop="false" attribute depends on requirement. Else you can also include css like
您可以根据要求添加/删除 data-backdrop="false" 属性。否则，您还可以包含 css 之类的
.modal-backdrop+.modal-backdrop {
opacity : 0;
}
回答by Nirali Maniar
$(document).on('show.bs.modal', '.modal', function () {
if ($(".modal-backdrop").length > -1) {
$(".modal-backdrop").not(':first').remove();
}
});
