https://i.sstatic.net/vHnVG.png https://i.sstatic.net/MhU3f.png
Utilizing Bootstrap 4.2.1, I have a modal that opens via a specific link:
<a href="#" data-toggle="modal" data-target="#inviteByEmailPopup" data-backdrop="false" data-keyboard="false">Add by Email</a>
The modal div is placed at the end of the document, right before the closing body tag
<div class="modal fade" tabindex="-1" role="dialog" id="inviteByEmailPopup" aria-hidden="true">
<div class="modal-dialog" role="document" data-backdrop="false">
<div class="card bg-transparent border-white mt-5">
<div class="card-header brand-gradient border-white">
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="text-white text-uppercase">Invite By Email</h5>
</div>
<div class="card-body p-3 pb-5 bg-brand-grey">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="text-white col-md-12" for="usern1">Name</label>
<div class="col-md-12">
<input id="inviteName" class="name-input form-control" type="text" >
</div>
</div>
</div>
~~~ Truncated for brevity only one input kept for example ~~~~
</div>
</div>
</div>
</div>
</div>
I have attempted the following solutions:
- Moving the modal around to prevent any overlap with "fixed" content.
- Playing with z-index values, ensuring the modal has a higher z-index than the backdrop.
- Following a guide dated back to 2016 (link to guide) despite its age.
- Disabling the backdrop using
data-backdrop="false"and adjusting it in my main CSS.
.modal-backdrop {
/* bug fix - no overlay */
display: none;
}
- Installing a z-index plugin for Chrome to inspect the issue. All z-index values are correct.
- Browsing through numerous Stack Overflow threads, attempting both accepted and unaccepted solutions. Despite being adept in css/html, this particular issue is proving challenging.