Prevent BODY from scrolling when a modal is opened

Bootstrap’s modal automatically adds the class modal-open to the body when a modal dialog is shown and removes it when the dialog is hidden. You can therefore add the following to your CSS:

body.modal-open {
    overflow: hidden;

You could argue that the above code belongs to the Bootstrap CSS code base, but this is an easy fix to add it to your site.

A workaround would be to add the class to the body when the modal is about to be shown, and remove it when the modal is closed:

$("#myModal").on("show", function () {
}).on("hidden", function () {

Note: to prevent the underlying page from jumping left/right when showing/hiding modals.

body {
    overflow-x: hidden;
    overflow-y: scroll !important;