Html Question posted in
Some basic documentation can be found here.

Html – Account creation modal with bootstrap 5

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="[email protected]" 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; }

Tags:

2

Answers


  1. 0

    Try this code

    <script>
var modal = document.getElementById('modalSignin');
var btn = document.getElementById("signupButton");
 btn.onclick = function() {
    modal.style.display = "block";
    document.body.style.overflow = "hidden"; // Prevent scrolling on the background
  }

window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
      document.body.style.overflow = ""; // Enable scrolling on the background
    }
  }
</script>
    Login or Signup to reply.
  2. 0

    You are actually describing the native bootstrap’s modal’s behavior. I’m not sure I’m understanding your problem well but:

    Given a modal with the id #modalSignin, you should implement the signup button like so:
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalSignin"> ... </button>

    OR if for whatever reason you can’t use the data-bs-target attribute, you should then use a specific event listener:

    $('#your-signup-button-id').on('click', function() {
    var modalToggle = new bootstrap.Modal(document.getElementById('the-modal-id'))
    modalToggle.show()
});

    This should do it as long as you don’t have any css rule that could break the native behavior (ie. if the user can scroll on the main content for example)

    See more here: Bootstrap 5 modal

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search