Account creation modal with bootstrap 5

31 viewsbootstrap 5csshtmljavascript
0

I went online and some research on how i could make my sign up modal pop up once someone presses the signup button n my navbar, however i was unable to come across any information on how to do that. I know it most likely uses JS, however i dont have much knowledge with js.

I did try to experiment with some js lines that could make it appear, however it only translated it, which didnt look too well. im trying to get it to show up directly in the middle of the users screen, and while it is up, only allow the user to scroll between the top and bottom of the modal, if the users screen is small. if it is big enough to view the entire modal, i dont want the user to be able to scroll at all until either they close the signup modal or they continue with the signup process. Ive included a picture of the modal, included the html code for the modal, and the css code for the modal. Remember i dont want the background to be interactable while the modal is open.

Image of my sign up modal.

`<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 <a class="gray text-links" 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" 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>
      <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>`

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