如何实现Bootstrap模态框在页面加载时自动弹出？

要让Bootstrap模态框在页面加载时自动弹出，有两种常用实现方式，以下是具体步骤：

前提条件 #

确保你的HTML页面已正确引入Bootstrap的样式文件（CSS）以及包含Popper.js的Bootstrap JavaScript文件，这是模态框正常运行的基础。

方法一：纯HTML实现（无需额外JS） #

直接修改模态框的HTML属性，强制显示模态框：

1. 给模态框根元素的class添加show，将原modal fade改为modal fade show
2. 将aria-hidden属性值从true改为false
3. 给页面<body>标签添加modal-open类，确保页面背景遮罩正常生效

修改后的模态框代码示例：

<div class="modal fade show" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="false">
    <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>

注意：这种方式可能出现页面加载时的样式闪烁，适合简单场景。

方法二：JavaScript实现（推荐，符合Bootstrap规范） #

通过Bootstrap官方Modal API，在DOM完全加载后主动触发模态框显示，这种方式更灵活且无样式闪烁问题：

在HTML页面末尾（或外部JS文件中）添加以下代码：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 获取模态框元素并初始化Modal实例
    const exampleModal = new bootstrap.Modal(document.getElementById('exampleModal'));
    // 调用show方法弹出模态框
    exampleModal.show();
});

如果需要延迟弹出（比如页面加载1秒后再弹出），可修改为：

document.addEventListener('DOMContentLoaded', function() {
    setTimeout(() => {
        const exampleModal = new bootstrap.Modal(document.getElementById('exampleModal'));
        exampleModal.show();
    }, 1000); // 延迟1000毫秒（1秒）
});

内容的提问来源于stack exchange，提问作者Novigda