If the modal container has a fixed or relative position or is within an element with fixed or relative position this behavior will occur.

Make sure the modal container and all of its parent elements are positioned the default way to fix the problem.

Here are a couple ways to do this:

1. Easiest way is to just move the modal div so it is outside any elements with special positioning. One good place might be just before the closing body tag </body>.
2. Alternatively, you can remove position: CSS properties from the modal and its ancestors until the problem goes away. This might change how the page looks and functions, however.

i think you should refer to first index

const $modal = jQuery('.modal')[0];
let modalInstance = bootstrap.Modal.getInstance($modal);

modalInstance._config.backdrop = false;
modalInstance._config.keyboard = false;

in vanilla it's equivalent to

document.getElementByClass('modal');

The first answer made me realize that the modal instance was not being properly retrieve, so according to the Bootstrap 5 documentation you can set or retrieve an existing instance of the modal object.

So I changed my code as follows and it worked

var myModalEl = document.querySelector('#scheduleMeetingModal');
var myModal = bootstrap.Modal.getOrCreateInstance(myModalEl);
myModal.hide();

This hides the backdrop properly and does not involve changing my code any further nor declaring the modal instance globally.