Multiple modals in bootstrap4 not working - html

Question

I have 2 modals that are triggered by selection of a drop down menu. If I have the "multi-part-delete modal" first and the "multi-part-move" modal second then the "multi-part-move" one does not show. The screen goes dark but the modal does not appear.
If I swap them around then the move one works and the delete one doesn't show. Anyone know how I can get them both to work.
<!-- Multi-Part Delete Modal -->
<div class="modal fade" id="multipartdeletemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Delete Selected Parts?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<i data-icon="ei-trash" data-size="l" class="trash"></i>
<h5>Are you sure you want to delete these parts?<br>
This process cannot be undone</h5>
<form action="{% url 'multi-delete' project.id %}" method="post" id="multidelete">{% csrf_token %}</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button form="multidelete" type="submit" value="Submit" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<!-- Multi-Part Move Modal -->
<div class="modal fade" id="multimovemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Move Selected Parts?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<i data-icon="ei-trash" data-size="l" class="trash"></i>
<h5>Please select group?</h5>
<form action="{% url 'multi-delete' project.id %}" method="post" id="multimove">{% csrf_token %}</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button form="multimove" type="submit" value="Submit" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>

Answer 1

use this IIFE function and you will have mulitple stackable modal support on bootstrap 4
(function multiple_modal() {
$(document).on('show.bs.modal', '.modal', function () {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function () {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});
})()

Answer 2

Yes, stacked modals are currently not working in Bootstrap 4.1. What I did was make them sequentially close/open each other. For example, when a child("stacked") modal opens from a parent modal, the parent modal closes, and when a child modal closes, it re-opens a parent(previously opened) modal - so there's always one modal open at a time.
On the child modal, I have a data attribute data-parent-modal="#parentExampleModal"
I have the Javascript as below:
$('.modal').on('shown.bs.modal', function (e) {
let $this = $(this),
$parentModal = $this.parent().find($this.data('parent-modal') + '.modal');
if ($parentModal.length) {
$parentModal.modal('hide');
$this.on('hidden.bs.modal', function (e) {
$parentModal.modal('show');
});
}
});
If you need further explanation, please let me know.

Answer 3

You could do it with CSS by selecting the second modal
.modal:nth-of-type(even) {z-index: 1052 !important;}
.modal-backdrop.show:nth-of-type(even) {z-index: 1051 !important;}