Using Bootstrap 5 I create my modal:
var myModal = new bootstrap.Modal(document.getElementById('scheduleMeetingModal'), {
backdrop: 'static'
});
myModal.show();
On another function I want to hide that modal, and use:
var myModalEl = document.getElementById('scheduleMeetingModal');
var myModal = bootstrap.Modal.getInstance(myModalEl);
myModal.hide();
However the backdrop stays there. I'm not able to change the passed options to remove backdrop and can't find anything on the Bootstrap documentation.
I have tried the following with no success:
var myModalEl = document.getElementById('scheduleMeetingModal');
var myModal = bootstrap.Modal.getInstance(myModalEl);
myModal.hide();
myModal.modal({backdrop: false});
EDIT: As requested, the html code for my modal:
<div class="modal" id="scheduleMeetingModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header d-flex justify-content-between">
<h5 class="modal-title" id="scheduleMeetingModalLabel"><?php echo lang('App.scheduleMeeting'); ?></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<?php echo form_open_multipart('schedule_meeting', 'id="schedule_meeting" class="needs-validation" novalidate=""'); ?>
<div class="modal-body">
<div class="row form-row">
<div class="col-md-6">
<div class="mb-3 feature-info-content">
<label class="form-label" for="day_one"><?php echo lang('App.day'); ?> *</label>
<input class="form-control" type="date" id="day_one" required name="day_one">
</div>
</div>
<div class="col-md-6">
<div class="mb-3 feature-info-content">
<label class="form-label" for="time_one"><?php echo lang('App.startTime'); ?> *</label>
<input class="form-control" type="time" id="time_one" required name="time_one">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="schedule_meeting" class="btn btn-primary ms-5"><?php echo lang('App.submit'); ?></button>
</div>
</div>
<?php echo form_close(); ?>
</div>
</div>
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.