无法使用JavaScript打开Bootstrap 5中的Modal

bfnvny8b 于 12个月前发布在 Bootstrap

关注(0)|答案(2)|浏览(164)

我目前正在尝试使用bootstrap 5创建一个加载对话框。
所以我做的第一件事是从文档复制到我的测试html的对话框：

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog" id = "waitDialog">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                   Some Stuff. 
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Understood</button>
                </div>
            </div>
            </div>
        </div>

字符串
然后我写了一点JS来尝试按照文档中的说明打开它

var myModal = document.getElementById('waitDialog');
  var modal = bootstrap.Modal.getInstance(myModal)
  modal.show();

型
这是直接来自https://getbootstrap.com/docs/5.0/components/modal/#via-javascript的文档
因为modal为null，所以I不工作。我做错了什么？

twitter-bootstrap

来源：https://stackoverflow.com/questions/68217890/cannot-get-modal-in-bootstrap-5-to-open-up-using-javascript

2条答案

按热度按时间

tcomlyy61#

你的代码有两个问题。
首先，getInstance方法返回与DOM元素关联的模态示例，因为它返回null，这意味着模态尚未初始化。还有另一个方法getOrCreateInstance，如果没有找到示例，它应该创建示例（https：//getbootstrap.com/docs/5.0/components/modal/#getorinstance）。
第二，模态元素是包含div的类名为modal，而不是id为waitDialog的元素。
因此，理想情况下，您的代码应该类似于下面的https://jsfiddle.net/7m1oqc9d/3/

var myModal = document.getElementById('staticBackdrop');
var modal = bootstrap.Modal.getOrCreateInstance(myModal)
modal.show()

个字符

赞(0）回复(0）举报 12个月前

pxiryf3j2#

首先，你缺少了new关键字。其次，你调用了bootstrap.Modal函数，传递了错误id的元素。
这段代码将工作：

var myModal = document.getElementById("staticBackdrop");
  var modal = new bootstrap.Modal(myModal);
  modal.show();

字符串

赞(0）回复(0）举报 12个月前

我来回答

无法使用JavaScript打开Bootstrap 5中的Modal

2条答案

相关问题

热门标签

最新问答