When using Bootstrap 5, I create my modal like this:
var myModal = new bootstrap.Modal(document.getElementById('scheduleMeetingModal'), {
backdrop: 'static'
});
myModal.show();
Later on, when I want to hide the modal in another function, I use this code:
var myModalEl = document.getElementById('scheduleMeetingModal');
var myModal = bootstrap.Modal.getInstance(myModalEl);
myModal.hide();
However, the backdrop remains visible even after hiding the modal. I have tried various approaches without success, as mentioned in the following code snippet:
var myModalEl = document.getElementById('scheduleMeetingModal');
var myModal = bootstrap.Modal.getInstance(myModalEl);
myModal.hide();
myModal.modal({backdrop: false});
EDIT: Here is 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>