如何为Bootstrap Modal添加顶部导航切换按钮

需求说明 #

我已完成登录Modal开发，需在其顶部添加两个导航按钮：一个跳转至注册Modal，一个对应登录Modal。查阅Bootstrap官方文档未找到相关配置方法，附上注册Modal代码，求实现建议或代码示例。

原注册Modal代码 #

<!-- Sign Up Modal -->
<div class="modal fade signup-modal" id="signupModal" tabindex="-1" aria-labelledby="Sign Up" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content rounded-4 signup-modal-background">
      <div class="modal-header p-5 pt-4 pb-0 border-bottom-0">
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <hr>
      <div class="modal-header p-5 pt-0 pb-0 border-bottom-0 end-50">
        <h2 class="fw-bold mb-0 fs-2 text-center">Register your Account</h2>
      </div>
       <div class="modal-header p-5 pb-0 pt-1 border-bottom-0">
        <h5 class="fw-normal mb-0 text-center">Lets get started with your account</h5>
      </div>
      <hr>
       <div class="modal-body p-5 pt-0 pb-0">
        <form class="">
          <div class="form-floating mb-3">
            <input type="text" class="form-control rounded-3 cbs-form input-group-custom-field" id="usernameInput" placeholder="Username" autocomplete="on" required>
            <label for="usernameInput">Username</label>
          </div>
          <div class="form-floating mb-3">
            <input type="email" class="form-control rounded-3 cbs-form input-group-custom-field" id="emailInput" placeholder="name@example.com" autocomplete="on" required>
            <label for="emailInput">Email address</label>
          </div>
          <div class="form-floating mb-3">
            <input type="password" class="form-control rounded-3 cbs-form input-group-custom-field" id="passwordInput" placeholder="Password" autocomplete="on" required>
            <label for="passwordInput">Password</label>
          </div>
          <div class="form-floating mb-3">
            <input type="password" class="form-control rounded-3 cbs-form input-group-custom-field" id="confirmPasswordInput" placeholder="Password-Confirm" autocomplete="on" required>
            <label for="confirmPasswordInput">Confirm Password</label>
          </div>
          <input class="" type="checkbox" id="agreementCheckbox" name="Agreement Checkbox" required>
          <label class="text-center d-inline" for="agreementCheckbox"><span>I agree to the <a class="gray text-links tooltip-test" title="Terms and Conditions" href="https://www.termsfeed.com/live/7f2a7964-ad07-4450-9cc5-b4435160db61">Terms and Conditions</a> and <a class="gray text-links tooltip-test" title="Privacy Policy" href="https://www.termsfeed.com/live/51c49715-5a49-477f-aa7b-d431b74dde6c">Privacy Policy</a></span></label>
          <button class="w-100 mb-2 mt-2 btn btn-lg rounded-3 btn btn1" type="submit">Next</button>
          <div class="text-center">
                    <p>Already have an account?<a title="Sign In" href="login.php" class="gray text-links">
                        Sign In
                      </a>
                    </p>
                  </div>
        </form>
      </div>
      <div class="modal-footer p-5 pt-1 pb-2">
      <h2 class="fs-5 fw-bold mb-3 text-center pb-0">Use a third-party to create your account.</h2>
          <button class="w-100 py-2 mb-2 btn rounded-3 border google-signup" type="submit">
            Continue with Google
          </button>
          <button class="w-100 py-2 mb-2 btn rounded-3 border google-signup" type="submit">
            Continue with Google
          </button>
          <button class="w-100 py-2 mb-2 btn rounded-3 border google-signup" type="submit">
            Continue with Google
          </button>
      </div>
    </div>
  </div>
</div>

/* Sign up Modal */
.signup-modal-background {
background-color: #222022;
}

实现方案 #

通过在Modal内部添加导航栏组件，结合Bootstrap的Modal API实现切换逻辑，具体步骤如下：

1. 改造Modal结构，添加顶部导航 #

在登录和注册Modal的modal-content最顶部，添加导航容器放置切换按钮，以下是改造后的完整代码：

登录Modal（带顶部导航）

<!-- Login Modal -->
<div class="modal fade login-modal" id="loginModal" tabindex="-1" aria-labelledby="Login" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content rounded-4 signup-modal-background">
      <!-- 新增顶部导航栏 -->
      <div class="d-flex">
        <button class="flex-fill border-0 bg-transparent py-3 fw-bold active text-white" id="loginTab">登录</button>
        <button class="flex-fill border-0 bg-transparent py-3 fw-bold text-secondary" id="signupTab">注册</button>
      </div>
      <hr class="my-0">
      <!-- 原有登录内容 -->
      <div class="modal-header p-5 pt-4 pb-0 border-bottom-0">
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-header p-5 pt-0 pb-0 border-bottom-0 end-50">
        <h2 class="fw-bold mb-0 fs-2 text-center">Login to your Account</h2>
      </div>
      <div class="modal-header p-5 pb-0 pt-1 border-bottom-0">
        <h5 class="fw-normal mb-0 text-center">Welcome back, please enter your details</h5>
      </div>
      <hr>
      <div class="modal-body p-5 pt-0 pb-0">
        <form class="">
          <div class="form-floating mb-3">
            <input type="email" class="form-control rounded-3 cbs-form input-group-custom-field" id="loginEmail" placeholder="name@example.com" autocomplete="on" required>
            <label for="loginEmail">Email address</label>
          </div>
          <div class="form-floating mb-3">
            <input type="password" class="form-control rounded-3 cbs-form input-group-custom-field" id="loginPassword" placeholder="Password" autocomplete="on" required>
            <label for="loginPassword">Password</label>
          </div>
          <button class="w-100 mb-2 mt-2 btn btn-lg rounded-3 btn btn1" type="submit">Login</button>
          <div class="text-center">
            <p>Forgot your password? <a class="gray text-links" href="#">Reset Password</a></p>
          </div>
        </form>
      </div>
      <div class="modal-footer p-5 pt-1 pb-2">
        <h2 class="fs-5 fw-bold mb-3 text-center pb-0">Use a third-party to login.</h2>
        <button class="w-100 py-2 mb-2 btn rounded-3 border google-signup" type="submit">
          Continue with Google
        </button>
      </div>
    </div>
  </div>
</div>

注册Modal（同步添加顶部导航）

<!-- Sign Up Modal -->
<div class="modal fade signup-modal" id="signupModal" tabindex="-1" aria-labelledby="Sign Up" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content rounded-4 signup-modal-background">
      <!-- 新增顶部导航栏 -->
      <div class="d-flex">
        <button class="flex-fill border-0 bg-transparent py-3 fw-bold text-secondary" id="loginTab2">登录</button>
        <button class="flex-fill border-0 bg-transparent py-3 fw-bold active text-white" id="signupTab2">注册</button>
      </div>
      <hr class="my-0">
      <!-- 原有注册内容 -->
      <div class="modal-header p-5 pt-4 pb-0 border-bottom-0">
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <hr>
      <div class="modal-header p-5 pt-0 pb-0 border-bottom-0 end-50">
        <h2 class="fw-bold mb-0 fs-2 text-center">Register your Account</h2>
      </div>
       <div class="modal-header p-5 pb-0 pt-1 border-bottom-0">
        <h5 class="fw-normal mb-0 text-center">Lets get started with your account</h5>
      </div>
      <hr>
       <div class="modal-body p-5 pt-0 pb-0">
        <form class="">
          <div class="form-floating mb-3">
            <input type="text" class="form-control rounded-3 cbs-form input-group-custom-field" id="usernameInput" placeholder="Username" autocomplete="on" required>
            <label for="usernameInput">Username</label>
          </div>
          <div class="form-floating mb-3">
            <input type="email" class="form-control rounded-3 cbs-form input-group-custom-field" id="emailInput" placeholder="name@example.com" autocomplete="on" required>
            <label for="emailInput">Email address</label>
          </div>
          <div class="form-floating mb-3">
            <input type="password" class="form-control rounded-3 cbs-form input-group-custom-field" id="passwordInput" placeholder="Password" autocomplete="on" required>
            <label for="passwordInput">Password</label>
          </div>
          <div class="form-floating mb-3">
            <input type="password" class="form-control rounded-3 cbs-form input-group-custom-field" id="confirmPasswordInput" placeholder="Password-Confirm" autocomplete="on" required>
            <label for="confirmPasswordInput">Confirm Password</label>
          </div>
          <input class="" type="checkbox" id="agreementCheckbox" name="Agreement Checkbox" required>
          <label class="text-center d-inline" for="agreementCheckbox"><span>I agree to the Terms and Conditions and Privacy Policy</span></label>
          <button class="w-100 mb-2 mt-2 btn btn-lg rounded-3 btn btn1" type="submit">Next</button>
          <div class="text-center">
                    <p>Already have an account?<a title="Sign In" href="#" class="gray text-links" data-bs-toggle="modal" data-bs-target="#loginModal" data-bs-dismiss="modal">
                        Sign In
                      </a>
                    </p>
                  </div>
        </form>
      </div>
      <div class="modal-footer p-5 pt-1 pb-2">
      <h2 class="fs-5 fw-bold mb-3 text-center pb-0">Use a third-party to create your account.</h2>
          <button class="w-100 py-2 mb-2 btn rounded-3 border google-signup" type="submit">
            Continue with Google
          </button>
          <button class="w-100 py-2 mb-2 btn rounded-3 border google-signup" type="submit">
            Continue with Google
          </button>
          <button class="w-100 py-2 mb-2 btn rounded-3 border google-signup" type="submit">
            Continue with Google
          </button>
      </div>
    </div>
  </div>
</div>

2. 添加切换逻辑的JavaScript #

通过Bootstrap的Modal实例控制显示隐藏，同时切换导航按钮样式：

// 获取Modal实例
const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
const signupModal = new bootstrap.Modal(document.getElementById('signupModal'));

// 登录Modal切换到注册Modal
document.getElementById('signupTab').addEventListener('click', () => {
  loginModal.hide();
  setTimeout(() => signupModal.show(), 300); // 等待关闭动画完成
});

// 注册Modal切换到登录Modal
document.getElementById('loginTab2').addEventListener('click', () => {
  signupModal.hide();
  setTimeout(() => loginModal.show(), 300);
});

3. 补充导航按钮样式 #

确保激活状态的按钮视觉区分度：

/* 导航按钮激活状态 */
.modal-content .btn.active {
  border-bottom: 2px solid #fff;
  color: #fff !important;
}

/* 导航按钮hover效果 */
.modal-content .btn:hover {
  color: #fff !important;
}

说明 #

• 导航栏用d-flex实现平分宽度，按钮样式与Modal深色主题匹配
• 用setTimeout避免Modal切换时的动画冲突
• 激活状态通过底部边框和文字颜色区分，可根据需求自定义样式

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