Bootstrap 5.2页面加载时用纯JavaScript打开Modal求助

之前使用Bootstrap搭配jQuery实现页面加载时自动显示Modal，现在Bootstrap 5.2不推荐使用jQuery，但相关文档不够完善。现有HTML结构：

<div class="modal auto-modal">

希望替换原jQuery代码：

$('.auto-modal').modal('show')

为纯JavaScript实现。尝试了以下代码，但modal始终返回null，改用getInstance(elem)或直接传入选择器也无效：

const elem = document.querySelector('.auto-modal')
const modal = bootstrap.Modal.getOrCreateInstance(elem)

求助如何通过纯JavaScript以编程方式打开已在HTML中创建的Modal，而非使用这种显式实例化的方式：

const modal = new bootstrap.Modal('.auto-modal')

1. 先排查核心问题：Modal结构不完整或代码执行时机错误 #

getOrCreateInstance返回null的本质原因只有两个：要么你的Modal元素不符合Bootstrap的结构要求，要么代码在DOM未完全加载时就执行了。

确保Modal结构符合Bootstrap规范

Bootstrap 5的Modal必须具备完整的层级结构，至少包含以下核心部分（缺失任何一层都会导致Bootstrap无法识别为Modal组件）：

<div class="modal auto-modal fade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框内容区域 -->
      <div class="modal-header">
        <h5 class="modal-title">标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <p>模态框内容</p>
      </div>
    </div>
  </div>
</div>

其中tabindex="-1"是无障碍访问必需属性，fade类用于过渡动画（可选但推荐）。

确保代码在DOM加载完成后执行

如果JS代码写在<head>中或页面顶部，会导致document.querySelector('.auto-modal')获取不到元素，进而getOrCreateInstance返回null。可以通过两种方式解决：

• 将代码放在页面底部（</body>标签之前）
• 包裹在DOMContentLoaded事件回调中

2. 可用的正确代码示例 #

document.addEventListener('DOMContentLoaded', function() {
  const elem = document.querySelector('.auto-modal');
  // 先判断元素是否存在，避免报错
  if (elem) {
    const modal = bootstrap.Modal.getOrCreateInstance(elem);
    modal.show();
  }
});

3. 补充说明 #

getOrCreateInstance的作用是：如果目标元素已经被Bootstrap初始化过Modal实例，就返回现有实例；如果没有，就自动创建一个新实例并返回。只要你的Modal结构正确、代码执行时机合理，这个方法就能正常工作，不需要手动用new bootstrap.Modal()实例化。

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