Bootstrap 5模态框代码修改：实现div可见性按需切换

以下是针对需求的具体修改步骤，以及完整的修正后代码：

具体修改点 #

1. 设置初始内容显示状态 #

给afterAcceptingTerms容器添加Bootstrap的d-none类，确保页面加载时默认隐藏该内容，仅展示beforeAcceptingTerms：

<div class="wrapper d-none" id="afterAcceptingTerms">

2. 编写内容切换函数 #

添加一个用于切换两个容器显示状态的函数，通过操作Bootstrap的d-none类实现显示/隐藏：

function toggleContent() {
  const beforeEl = document.getElementById('beforeAcceptingTerms');
  const afterEl = document.getElementById('afterAcceptingTerms');
  beforeEl.classList.add('d-none');
  afterEl.classList.remove('d-none');
}

3. 修改同意按钮的点击事件 #

更新模态框的「同意条款」按钮，在存入本地存储后调用切换函数：

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="localStorage.setItem('acceptTerms',1); toggleContent();">I agree to the Terms.</button>

4. 完善页面加载逻辑 #

在页面初始化脚本中，增加已同意条款时直接显示内容的逻辑：

let acceptTerms = localStorage.getItem('acceptTerms');
if(acceptTerms != 1){
  var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
  myModal.show()
} else {
  toggleContent();
}

完整修正后代码 #

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Modal Popup Page</title>
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="/assets/js/popper.min.js"></script>
    <script src="/assets/js/bootstrap.min.js" ></script>
  </head>
  <body>
    <div class="wrapper" id="beforeAcceptingTerms">
      <section class="content-section">
        <p>You must click on the "I agree to the terms button" in order to see the content on this page.</p>
      </section>
    </div>
    <div class="wrapper d-none" id="afterAcceptingTerms">
      <section class="content-section">
        <p>The page content goes here.  But this is only visible because you clicked on the Accept button on the modal in order to get the modal to go away.</p>
      </section>
    </div>
<!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel"   data-bs-backdrop="static" aria-hidden="true">
      <div class="modal-dialog" style="position: fixed;bottom: 0;left: 0;right: 0;">
          <div class="modal-content">
        <div class="modal-body">
            By using this site, you certify that you agree to our <a href="/terms">Terms of Use</a>.
        </div>
        <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="localStorage.setItem('acceptTerms',1); toggleContent();">I agree to the Terms.</button>
        </div>
      </div>
      </div>
    </div>
    <script>
      function toggleContent() {
        const beforeEl = document.getElementById('beforeAcceptingTerms');
        const afterEl = document.getElementById('afterAcceptingTerms');
        beforeEl.classList.add('d-none');
        afterEl.classList.remove('d-none');
      }

      let acceptTerms = localStorage.getItem('acceptTerms');
      if(acceptTerms != 1){
        var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
        myModal.show()
      } else {
        toggleContent();
      }
    </script>
  </body>
</html>

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