modal-backdrop fade in issue
Just move the entire modal outside of the rest of your code, to the very
bottom. It doesn't need to be nested in any other element, other than the body.
<body>
<!-- All other HTML -->
<div>
...
</div>
<!-- Modal -->
<div class="modal fade" id="myModal">
...
</div>
</body>
They hint at this solution in the documentation ( Modal Markup Placement )
Always try to place a modal's HTML code in a top-level position in your
document to avoid other components affecting the modal's appearance and/or
functionality.