Bootstrap Modal not scrollable when opened with jQuery

Question

I have a bootstrap modal set up but I populate it with data retrieved via the jQuery ajax function. If the modal is opened using the following code, then it opens fine, and is scrollable.

<button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#editContact"><i class="fa fa-pencil"></i></button> 

However, as I populate it with data, I call a JavaScript function to do the ajax call, and populate it with the data. The function is called on button click, like so:

<button type="button" class="btn btn-warning btn-xs" onclick="open_contact(2);"><i class="fa fa-pencil"></i></button> 

Which calls the follow JavaScript function:

function open_contact(id)
{
    $.post("contacts/get",
    {
        // Posts relevant details to show the right content
    },
    function(data, status) {
        // Code here to check for valid response etc
        $('#editContact').modal('show');
    });
}

This JavaScript works fine - it throws no error and it retrieves the data fine. It also opens the modal fine. However, when the modal is opened with the JavaScript rather than with the first button (with the data-target), the whole browser window scrolls rather than just the modal.

For reference, the modal opening tags:

<div class="modal fade" id="editContact" tabindex="-1" role="dialog" aria-labelledby="editContact" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

Does anyone have any suggestions please?

Edit

I should just clarify that my issue isn't the fact that I don't have scroll bars. The issue I'm having is when I scroll using the mouse wheel for example, the page behind the modal will scroll, but the modal doesn't move. Therefore, any text hidden from view in the modal, never comes into view.

Answer 1

I think the comments to your question are right, not showing the scrollbar is the intended behaviour.

Class modal-open gets added to the HTML body when you show the modal, and removed when you hide it.

This makes the scrollbar disappear since the bootstrap css says

.modal-open {
    overflow: hidden;
}

To achieve what you want - showing the scrollbar - you can override the native css by specifying

.modal-open {
    overflow: scroll;
}

in your own css file.