bootstrap modal wrong content - html

Question

I am trying to make a Bootstrap modal, but right now when I open it up it inserts the html from the entire page and inserts it into my modal. I copied the sample modal straight from w3schools and I'm not using any JQuery to dynamically update it or anything.
When the modal is hidden the html shows me the correct structure: My navbar, content, then the hidden modal with the proper modal content. When I show the modal everything messes up. The same structure exists with the navbar, then content, then modal (not hidden as it should be). However, this time inside the modal is the html from the rest of the page repeated. A second modal along with the correct modal content is buried inside of the repeated html content, but it is also hidden. The result is that I see two versions of the body content, one in front of the other. When I hide the modal everything goes back to normal.
In other words this:
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Keeps getting changed to this:
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<meta></meta>
<title></title>
<script></script>
<div class="navbar"></div>
<div class="container"></div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I should also point out that it does not duplicate tags such as head or body. It really doesn't make sense to me why the inside of the modal div is being changed at all when I want it to remain static. Any help is appreciated, thank you.