javascriptbootstrap-modalbootstrap-5

Bootstrap 5 - hide modal does not remove backdrop


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>

Solution

  • 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.