Bootstrap 5 实现页面加载自动打开模态框问题求助

代码存在的核心问题： #

• 缺少模态框必须的外层.modal容器，结构不符合Bootstrap5官方规范
• 使用了jQuery语法调用模态框，但代码中并未引入jQuery依赖，Bootstrap5原生JS不支持$调用方式
• 页面加载事件与模态框调用方法不适配Bootstrap5 API

1. 修正模态框HTML结构 #

给原有的modal-dialog外层添加.modal父容器，完整结构如下：

<!-- Vertically Centered Cookies Modal -->
<div class="modal fade" id="cookieModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Do You Want Cookie? We Want Yours! 🍪</h5>
      </div>
      <div class="modal-body">
        This site uses cookies to personalize the content for you.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

2. 替换原有JS调用代码 #

使用Bootstrap5原生JS API实现页面加载后自动弹出，无需引入jQuery：

<!--Modal JS Script --> 
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    const cookieModal = new bootstrap.Modal(document.getElementById('cookieModal'));
    cookieModal.show();
  });
</script>

修改完成后刷新页面即可看到模态框正常居中弹出。

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