Bootstrap 5.1调用Modal弹窗报Cannot read property 'classList' of undefined如何解决

报错原因 #

该错误由两个常见问题导致：

• 你每次触发弹窗时都重复初始化Bootstrap Modal实例，重复初始化会触发内部属性读取异常
• 你的模态框DOM节点缺失Bootstrap 5强制要求的tabindex="-1"属性

修复方案 #

方案1（推荐：全局仅初始化一次实例）

JS部分修改为提前初始化实例，触发时直接调用show方法即可：

// 全局存储模态框实例
let myModal = null

// DOM加载完成后完成初始化
document.addEventListener('DOMContentLoaded', function () {
  myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
})

function show() {
  myModal.show()
}

HTML的模态框节点补充tabindex属性：

<div class="modal" id="myModal" tabindex="-1" aria-hidden="true">
  <!-- 原有模态框内部结构不变 -->
</div>

方案2（适合需要动态初始化的场景）

如果业务需要每次触发时都重新初始化，新增实例存在性判断逻辑即可：

function show() {
  const modalEl = document.getElementById('myModal')
  // 先销毁已存在的实例
  const existedInstance = bootstrap.Modal.getInstance(modalEl)
  if (existedInstance) existedInstance.dispose()
  // 初始化新实例并调用show
  const myModal = new bootstrap.Modal(modalEl, {})
  myModal.show()
}

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