Bootstrap5调用其他文件模态框报this._element未定义如何解决

你报错的核心原因是 Bootstrap 5 实例化模态框时必须传入当前页面真实存在的 DOM 元素，只要保证执行 new bootstrap.Modal() 前页面已经加载了 id 为 myModal 的元素即可，可根据你的项目场景选择以下两种方案：

方案1：直接嵌入模态框代码（最简单高效） #

直接将另一个文件里的模态框 HTML 片段复制到当前按钮所在页面的 body 标签末尾，不需要修改原有逻辑即可正常实例化模态框，适合只有少数页面需要用到该评论模态框的场景。

方案2：动态加载模态框DOM（适合多页复用场景） #

如果多个页面都需要用到该模态框，不想重复复制代码，可以在点击按钮时先判断模态框是否已加载，未加载则先请求模态框文件插入当前页面，再执行后续逻辑，示例代码如下：

document.addEventListener('click', async function(event) {
  const readcomment = event.target.closest(".read-comment");
  if (!readcomment) return;

  const articleId = readcomment.getAttribute('data-id');
  const commentUrl = `../comments/${articleId}/`;

  // 检查当前页面是否存在模态框元素
  let modalEl = document.getElementById('myModal');
  // 不存在则动态加载模态框模板
  if (!modalEl) {
    try {
      // 替换为你存放模态框的文件路径
      const modalRes = await fetch('/public/tpl/comment-modal.html');
      const modalHtml = await modalRes.text();
      document.body.insertAdjacentHTML('beforeend', modalHtml);
      modalEl = document.getElementById('myModal');
    } catch (loadErr) {
      console.error('模态框加载失败：', loadErr);
      return;
    }
  }

  // 实例化模态框、请求评论数据
  const commentModal = new bootstrap.Modal(modalEl);
  try {
    const commentRes = await fetch(commentUrl);
    const commentContent = await commentRes.text();
    // 替换为你的模态框内评论内容容器的选择器
    modalEl.querySelector('.modal-body').innerHTML = commentContent;
    commentModal.show();
  } catch (fetchErr) {
    console.error('评论数据获取失败：', fetchErr);
  }
})

注意事项 #

• 模态框HTML文件内的根元素必须保留 id="myModal" 的属性，否则无法匹配选择器
• 提前在模态框的结构内预留好内容渲染容器，比如 Bootstrap 模态框默认的 .modal-body 类容器，或者自定义id容器
• 如果模态框使用频率很高，可以在页面初始化时就提前加载插入DOM，不用等到点击按钮时才加载，优化打开速度

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