bootstrap modal dialog not showing (black background showing)
Question
I have two modal dialogs (causing the issue) in the html file.
Which ever modal dialog is placed first in the sequence of the html file, shows properly on button click (vice-versa).
Both modal dialogs have unique id's and are invoked appropriately, yet one modal dialog doesn't show up (if invoked later on-separately).
<!-- 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 answers
solution1
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.
solution2
0 ACCPTED 2019-10-29 03:04:02
Try bellow code. It's working. use the bellow cdn and script.
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.