引导模式对话框未显示（黑色背景显示）
[英]bootstrap modal dialog not showing (black background showing)
问题描述
I have two modal dialogs (causing the issue) in the html file.
我在 html 文件中有两个模式对话框（导致问题）。
Which ever modal dialog is placed first in the sequence of the html file, shows properly on button click (vice-versa).哪个模态对话框首先放置在 html 文件的序列中，在按钮单击时正确显示（反之亦然）。
Both modal dialogs have unique id's and are invoked appropriately, yet one modal dialog doesn't show up (if invoked later on-separately).两个模态对话框都有唯一的 id 并且被适当地调用，但是一个模态对话框没有显示（如果稍后单独调用）。
<!-- Modal dialog xyz is the first in the sequence of html code -->
<div class="modal fade" id="xyzModal" tabindex="-1" role="dialog" aria-labelledby="xyzModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
.....
</div>
</div>
<!-- Modal dialog abc is the second M.D in the sequence of html code -->
<div class="modal fade" id="abcModal" tabindex="-1" role="dialog" aria-labelledby="abcModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
.....
</div>
</div>
Where exactly am I going wrong in invocation of the modal dialogs.我在调用模态对话框时到底哪里出错了。
For the corresponding button clicks, I am using hide/show functions as well, but is not working.对于相应的按钮点击，我也在使用隐藏/显示功能，但不起作用。
$("#xyzModal").modal('hide');
$("#abcModal").modal('show');
2 个解决方案
解决方案1
0 2019-10-28 20:33:38
If you need to hide all modals before you open a new one, then the best to do is:如果您需要在打开新模式之前隐藏所有模式，那么最好的做法是：
$(".modal").modal('hide');
$("#abcModal").modal('show');
This ensures that all modals are hidden before you open a new one.这可确保在您打开新模式之前隐藏所有模式。
解决方案2
0 已采纳 2019-10-29 03:04:02
Try bellow code.试试下面的代码。 It's working.它正在工作。 use the bellow cdn and script.使用下面的 CDN 和脚本。
<!DOCTYPE html>
<html>
<head>
<title>Test Modal</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#xyzModal">
Launch xyzModal modal
</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#abcModal">
Launch abcModal modal
</button>
<!-- Modal dialog xyz is the first in the sequence of html code -->
<div class="modal fade" id="xyzModal" tabindex="-1" role="dialog" aria-labelledby="xyzModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
.....
</div>
</div>
<!-- Modal dialog abc is the second M.D in the sequence of html code -->
<div class="modal fade" id="abcModal" tabindex="-1" role="dialog" aria-labelledby="abcModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
.....
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#xyzModal').on('shown.bs.modal', function () {
//
})
$('#abcModal').on('shown.bs.modal', function () {
//
})
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.