如何在 Bootstrap 5.1.0 模式之间切换？

Question

我只是从Bootstrap 5 docs复制了示例，但是如果我从模态弹出窗口中打开第二个模态，则第一个模态不会隐藏。 为什么？

您可以看到第二个弹出窗口的背景也有点暗，这是因为第二个弹出窗口只是简单地覆盖在第一个窗口上，而没有隐藏先前的模态。

我也在本地尝试过，结果相同：第一个模态永远不会隐藏。

有趣的是，它在引导文档网站上按预期工作......

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script> <a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a> <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Show a second modal and hide this one with the button below. </div> <div class="modal-footer"> <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button> </div> </div> </div> </div> <div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Hide this modal and show the first with the button below. </div> <div class="modal-footer"> <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button> </div> </div> </div> </div>

https://jsfiddle.net/neog0236/1/

Answer 1

我看到您的 JSFiddle 演示使用了较旧的库版本。 当我更新它的工作原理。 请参阅5.1.1 发行说明的亮点部分。

Answer 2

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