My issue involves two modals: one that displays appointment information with a delete button, and another that serves as a warning before deleting. I want the delete-warning modal to overlay a backdrop on the modal beneath it, graying it out. However, both modals end up on top of the backdrop.
I am unable to access the div with the backdrop class, so I cannot give the backdrop of the delete-modal a different class to distinguish between the two backdrops. Is there a different approach I can take?
Delete-Modal:
<div class="modal fade delete-modal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Achtung!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="deleteModalBody">
</div>
<div class="modal-footer">
<button type="button" id="deleteButton" class="btn btn-danger">Eintrag löschen</button>
<button type="button" id="cancelButton" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Abbrechen</button>
<button type="button" id="okButton" class="btn btn-primary" data-dismiss="modal" aria-label="Close">OK</button>
</div>
</div>
Info-Modal:
{# Modal #}
<div class="modal fade" id="terminModal" tabindex="-1" role="dialog" aria-labelledby="terminModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="terminModalLabel">Lorem</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row pad-bottom">
<div class="col-sm">
{# Datum #}
<label for="datum" class="label-lg">Datum</label><br>
<input class="form-control-plaintext" readonly type="text" id="datum" name="datum" value="01.01.1970">
</div>
<div class="col-md align-self-end">
{# Tageszeit#}
<input class="form-control-plaintext" readonly type="text" name="tageszeit" id="tageszeit" value="dolor">
</div>
</div>
<div class="row pad-bottom">
<div class="col-lg">
{# Intervall #}
<label for="intervall" class="label-lg">Intervall</label><br>
<input type="text" readonly class="form-control-plaintext" id="intervall" name="intervall" value="sit">
</div>
</div>
<div class="row pad-bottom">
<div class="col-lg">
{# Azubi-Liste #}
<div class="card">
<div class="card-header align-middle">
Teilnehmer
</div>
<div class="card-body overflow-auto">
<div id="azubis" class="container-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
<form method="post" action="{{ route("termin/edit") }}" id="submitForm">
<div class="modal-footer">
<button id="einzelTerminSelect" name="einzelTerminSelect" type="submit" class="btn btn-primary">Bearbeiten</button>
<button id="gruppenTerminSelect" name="gruppenTerminSelect" type="submit" class="btn btn-primary">Bearbeiten für alle Teilnehmer</button>
<input type="button" value="löschen" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal" onclick="confirmDelete('submitForm')">
<input type="hidden" id="kalenderDel" name="kalenderDel">
</div>
</form>
</div>