如何实现Bootstrap模态框页面加载时自动弹出（无需按钮触发）

要实现页面加载时自动弹出Bootstrap模态框，其实很简单，只需要利用Bootstrap提供的模态框API，在页面DOM加载完成后主动触发模态框的显示方法就行。下面分不同Bootstrap版本给你具体方案：

针对Bootstrap 3/4（依赖jQuery的版本） #

直接在页面中添加这段JavaScript代码：

$(document).ready(function() {
    // 选中你的模态框元素，调用show方法
    $('.bs-example-modal-sm').modal('show');
});

这段代码的作用是：当页面DOM完全加载完成后，自动找到类名为bs-example-modal-sm的模态框，并调用它的show方法，让模态框直接弹出。

针对Bootstrap 5（无jQuery依赖的版本） #

Bootstrap 5不再依赖jQuery，所以用原生JavaScript实现：

document.addEventListener('DOMContentLoaded', function() {
    // 创建模态框实例并调用show方法
    const autoModal = new bootstrap.Modal(document.querySelector('.bs-example-modal-sm'));
    autoModal.show();
});

注意事项 #

• 确保你已经正确引入了对应版本的Bootstrap JS文件（如果是Bootstrap 3/4，还要先引入jQuery），文件引入顺序不能错。
• 原来的触发按钮可以保留（不会影响自动弹出），也可以根据需求删除掉，不影响模态框的自动触发。

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