I am trying to implement an AJAX call in a Bootstrap modal that has scrolling. The goal is to load data from the server when the user scrolls to the bottom of the modal, not the entire page. I have tried using jQuery code for this purpose, but it doesn't seem to work with the Bootstrap modal.
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
// ajax call to retrieve and append data
}
});
This is how my modal looks like:
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">ASDFASDFASDFASDF</h3>
</div>
<div class="modal-body"> <!-- Long content omitted for brevity -->
</div>
<div class="modal-footer"> ASDFASDFASDFASDF </div>
</div>
</div>
</div>
My CSS for the modal:
/* Custom CSS applied after bootstrap.css */
.modal{
display: block !important;
}
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
height: 250px;
overflow-y: auto;
}