英文:
How to get Bootstrap modal pop up on page load?
问题
我有一个带有基本模态框的静态HTML页面，使用Bootstrap文档中的代码：
<div class="modal fade" id="exampleModal" tabindex="-1" 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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</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">Save changes</button>
</div>
</div>
</div>
</div>
在我的app.js文件中，我有一个app.get()方法来提供此文件：
app.get("/", (req, res) => {
res.sendFile(__dirname + "/modal.html");
});
我想在页面加载时弹出此模态框，我该怎么做？
英文:
I have a static HTML page with a basic modal from Bootstrap docs:
<div class="modal fade" id="exampleModal" tabindex="-1" 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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</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">Save changes</button>
</div>
</div>
</div>
</div>
In my app.js file I have an app.get() method serving this file:
app.get("/", (req, res) => {
res.sendFile(__dirname + "/modal.html");
});
I would like this modal to pop up on page load, how do I do that?
答案1
得分: 1
请尝试使用DOMContentLoaded事件。类似这样的代码：
<script>
window.addEventListener('DOMContentLoaded', function () {
var myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {
keyboard: false
});
myModal.show();
});
</script>
注意： 上面的代码未经测试，但你需要类似这样的代码。
英文:
try using DOMContentLoaded event. Something like this:
<script>
window.addEventListener('DOMContentLoaded', function () {
var myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {
keyboard: false
});
myModal.show();
});
</script>
NOTE: The above code is not tested but you'd need something like this.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论