Bootstrap Modal Closing Behavior - css

Question

I have a button Sign Up that loads in content from another file in the form of a Modal. When I click the button for the first time, the script works normally with no errors/warnings. However after the first time, if I dismiss the modal by clicking off of the element, clicking the Sign Up button again STILL WORKS, however it now throws a console error, stating $(...).modal(...).find(...).load(...) is not a function. In another one of my posts trying to solve this issue, I discovered the .load() method wouldn't work because I had the wrong version of jquery sourced in the file. But since then I have fixed that issue and the Modal now works, so I don't understand where this error is coming from.
Secondly, when the modal appears, it darkens the rest of the page (normal behaviour of the modal), if I try to dismiss the modal using the close button in the header, the modal disappears however the rest of my page is left darkened?/left out of focus? and the page becomes un-interactable...
Thirdly, I posted this as a seperate question due to the difference in nature: Bootstrap Modal messes up Carousel CSS
How do I fix these issues?
HTML file
<!-- NavBar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Land Power</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only"></span></a>
</li>
<!-- <li class="nav-item ">
<a class="nav-link" href="contact.html">Contact Us<span class="sr-only"></span></a>
</li> -->
</ul>
</div>
<div class="d-flex justify-content-end">
<button class="signup btn btn-outline-success my-2 my-sm-0" type="button" linkFile="contact.html" data-toggle="modal" data-target="#theModal">Sign Up</button>
</div>
</div>
</nav>
<!-- Modal -->
<div class="modal fade" id="theModal" 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="exampleModalLabel">Sign Up</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Modal content load script
<script>
$('.signup').on('click', function(e){
e.preventDefault();
$('.modal').modal('show').find('.modal-body').load($(this).attr('linkFile'));
});
</script>

Answer 1

I think the issue here is likely that you are including bootstrap from two sources. Check your code to make sure you are including bootstrap from only one source. I had a similar issue not too long ago, solved when I realized bootstrap was being automatically included from another CDN.
Here is a jsfiddle containing your code inside a bootstrap template. It works as you have described it to.
https://jsfiddle.net/fatchild/b04r7Ljo/3/
It is a good idea to take your code out of context into a tool like JSfiddle in order to isolate the bug. As you can see there is nothing wrong with the code you have supplied.