After searching online for a way to make my sign up modal pop up when the signup button in my navbar is pressed, I was unable to find any information on how to achieve this. I suspect it involves JavaScript, but my knowledge of JS is limited.
I attempted to experiment with some JS code that could trigger the modal to appear, but it only resulted in translation, which didn't look good. My goal is to have the modal show up in the center of the user's screen and restrict scrolling between the top and bottom of the modal if the user's screen is small. If the screen is large enough to display the entire modal, I don't want the user to be able to scroll until they either close the signup modal or continue with the signup process. I have provided an image of the modal, along with the HTML and CSS code. Additionally, I prefer the background not to be interactive while the modal is open.
Check out the image of my sign-up modal here.
<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>
<!-- Additional form inputs omitted for brevity -->
</form>
</div>
</div>.signup-modal-background { background-color: #222022; }Update: Success! Thanks to everyone who assisted me. For those facing a similar issue, I've shared the code that worked for me:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
<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>