Bootstrap V5手动调用不起作用的模式myModal.show()(普通的javascript) [英] Bootstrap V5 manually call a modal myModal.show() not working (vanilla javascript)
本文介绍了Bootstrap V5手动调用不起作用的模式myModal.show()(普通的javascript)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在Bootstrap 5中手动调用模式的正确方式是什么？
我想在页面打开时显示模式。我试过了：
我的模式
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
...
...
...
</div>
</div>
</div>
我的脚本是
var myModal = document.getElementById('myModal');
document.onreadystatechange = function() {
myModal.show();
}
但在控制台日志中收到此错误：
myModal.show is not a function
at HTMLDocument.document.onreadystatechange
推荐答案
模式插件通过数据属性或JavaScript按需切换隐藏内容。它还会在中添加.modal-Open以覆盖默认滚动行为，并生成.modal-Backdown以提供一个单击区，用于在模式之外单击时取消所显示的模式。 [source]
如何通过Vanilla JavaScript使用
使用一行JavaScript创建一个模式：
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
快速示例：
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
document.onreadystatechange = function () {
myModal.show();
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- JavaScript and dependencies -->
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous"
></script>
<script src="./app.js"></script>
</body>
</html>至于您的代码，您没有按照正确的方式在Vanilla JavaScript中显示/切换模式。为什么当myModal只是一个DOM元素时，您希望myModal.show()发生？
这篇关于Bootstrap V5手动调用不起作用的模式myModal.show()(普通的javascript)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
