I've spent the last few hours working with the bootstrap modal, but I'm encountering some issues. Despite my thorough search, I haven't found anyone facing a similar problem.
Here is the structure of my modal:
<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Most aspects are functioning correctly, but when I click the button, the containing div disregards its margin-top and jumps to the top of the page. I suspect it might be a simple mistake on my part.
Edit: Below is the CSS snippet I've applied to this page. I forgot to mention that the modal mentioned above exists within a page housing datatables, which are wrapped in an iframe for another page. Upon clicking to open the modal, the div containing the iframe also moves to the top of the page.
.container{
position: relative;
top: 10px;
height: 100%;
}
a, a:hover {
color: #6a6e4d;
text-decoration: none;
font-weight: bold;
}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover,
.pagination>.active>span:hover, .pagination>.active>a:focus,
.pagination>.active>span:focus {
background-color: #6a6e4d;
border-color: #6a6e4d;
}