Bootstrap 5 - 隐藏模式不会删除背景

Question

使用 Bootstrap 5 创建我的模态：

var myModal = new bootstrap.Modal(document.getElementById('scheduleMeetingModal'), {
    backdrop: 'static'
});
myModal.show();

在另一个功能上，我想隐藏该模式，并使用：

var myModalEl = document.getElementById('scheduleMeetingModal');
var myModal = bootstrap.Modal.getInstance(myModalEl);
myModal.hide();

然而背景仍然存在。我无法更改传递的选项以删除背景，并且在 Bootstrap 文档中找不到任何内容。

我尝试了以下方法但没有成功：

var myModalEl = document.getElementById('scheduleMeetingModal');
var myModal = bootstrap.Modal.getInstance(myModalEl);
myModal.hide();
myModal.modal({backdrop: false});

编辑： 根据要求，我的模态的 html 代码：

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

Answer 1

第一个答案让我意识到模态实例没有被正确检索，因此根据 Bootstrap 5 文档，您可以设置或检索模态对象的现有实例。

所以我按如下方式更改了代码并且它起作用了

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

这会正确隐藏背景，并且不涉及进一步更改我的代码，也不涉及全局声明模态实例。

Answer 2

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

这个解决方案对我不起作用，我补充说：

$('.modal-backdrop').hide();

删除背景就可以了。

Answer 3

我修改了你的代码。您的 JavaScript 代码无效，因此无法正常工作。现在我已经解决了这个问题。您可以运行此代码并检查它。

var modal = new bootstrap.Modal(
  document.getElementById("scheduleMeetingModal")
);

function openModal() {
  modal.show();
}

function closeModal() {
  modal.hide();
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />


<button class="btn btn-primary" onclick="openModal()">Open Modal</button>
<!-- Modal -->


<div class="modal" id="scheduleMeetingModal" tabindex="-1" role="dialog" aria-hidden="true">
    <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" onclick="closeModal()"></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>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Answer 4

如果您使用 Bootstrap V5，请确保您可能使用的 Bootstrap 文档中的模态元素不包含“fade”类。一旦你删除它，OP提出的解决方案就可以正常工作。