如何不引入jQuery，通过原生JavaScript调用Bootstrap 5模态框

问题核心原因 #

你当前使用的是Bootstrap 5运行环境，但代码中混用了Bootstrap 4的jQuery版本语法：Bootstrap 5已完全移除jQuery依赖，默认不加载jQuery，你写的$开头的jQuery语法自然会抛出未定义错误，同时模态框的触发、关闭属性也都是Bootstrap 4的旧写法，不符合Bootstrap 5的规范。

修改步骤 #

1. 替换所有Bootstrap 4专属的模态框数据属性为Bootstrap 5的命名空间版本：

• 所有触发模态框的按钮，把data-toggle="modal"改为data-bs-toggle="modal"，data-target="#exampleModal"改为data-bs-target="#exampleModal"
• 所有关闭模态框的按钮，把data-dismiss="modal"改为data-bs-dismiss="modal"

2. 把原有的jQuery版事件监听代码替换为原生JS写法，放到Bootstrap JS引入之后的位置：

const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // 获取触发模态框的按钮
  const button = event.relatedTarget
  // 读取按钮上的自定义属性
  const recipient = button.getAttribute('data-whatever')
  // 直接用原生方法修改模态框内容
  const modalTitle = exampleModal.querySelector('.modal-title')
  const recipientInput = exampleModal.querySelector('.modal-body input#recipient-name')

  modalTitle.textContent = `New message to ${recipient}`
  recipientInput.value = recipient
})

完整修正后的代码 #

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">New message</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form>
              <div class="mb-3">
                <label for="recipient-name" class="col-form-label">Recipient:</label>
                <input type="text" class="form-control" id="recipient-name">
              </div>
              <div class="mb-3">
                <label for="message-text" class="col-form-label">Message:</label>
                <textarea class="form-control" id="message-text"></textarea>
              </div>
            </form>
          </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">Send message</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <!-- 原生JS实现模态框内容动态修改 -->
    <script>
      const exampleModal = document.getElementById('exampleModal')
      exampleModal.addEventListener('show.bs.modal', event => {
        const button = event.relatedTarget
        const recipient = button.getAttribute('data-whatever')
        const modalTitle = exampleModal.querySelector('.modal-title')
        const recipientInput = exampleModal.querySelector('.modal-body input#recipient-name')
        modalTitle.textContent = `New message to ${recipient}`
        recipientInput.value = recipient
      })
    </script>
  </body>
</html>

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