点击导航栏注册按钮弹出Modal的实现方案及问题解决

我之前上网查找如何实现点击导航栏中的注册按钮后弹出注册Modal，但没找到合适的方法。我知道这大概率需要用JS，但我对JS了解不多，自己写的JS代码效果很差。

我的具体需求：

• Modal在用户屏幕居中显示
• 当屏幕较小时，仅允许用户在Modal内部上下滚动
• 当屏幕足够大可以完整显示Modal时，直到用户关闭Modal或完成注册流程前禁止页面任何滚动
• Modal弹出时背景不可交互

附上我的初始HTML代码和CSS代码：

初始HTML代码 #

<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5 signup-modal" tabindex="-1" role="dialog" id="modalSignin">
    <h2>Register your Account</h2>
    
  

  <div class="modal-body p-5 pt-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="login.php" class="gray text-links">
                    Sign In
                  </a>
                </p>
              </div>
      <hr class="my-4">
      <h2 class="fs-5 fw-bold mb-3 text-center">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>
    </form>
  </div>
</div>

初始CSS代码 #

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

更新：问题已解决 #

感谢各位的帮助！我已经搞定了Modal的问题，现在把可用代码分享出来，供有同样需求的人参考：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </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">Save changes</button>
      </div>
    </div>
  </div>
</div>

注：这段代码基于Bootstrap框架，可自动满足所有需求：

• Modal自动居中显示
• 小屏幕时Modal内容区域自动支持滚动
• Modal弹出时自动锁定页面滚动，背景添加遮罩不可交互

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