Bootstrap 5 Modal Doesn't Show with Fade Class - modal-dialog

Question

When I add the fade class to my Bootstrap 5 modal, it doesn't show. If I remove the class, the dialog shows but the body isn't greyed out nor does the modal animate. My HTML is:
<div class="modal fade" tabindex="-1" id="forgot_block" aria-labelledby="label-forgot_block" aria-hidden="true">
<div class="modal-dialog " style="border-radius: 10px;">
<div class="modal-content">
<div class="modal-header ui-widget-header">
<h5 class="modal-title" id="label-forgot_block">Forgot Password</h5>
</div>
<div class="modal-body">
<b>Please enter your email address below and a new temporary password will be sent to you.</b>
<table>
<tr>
<input type="text" name="current_email" id="current_email" placeholder="email address" size="40" onkeyup="checkKey(event,'sendPassword_exec'">
</tr>
</table>
<div id="dialog_alert-forgot_block">
</div>
</div>
<div class="modal-footer" id="dialog_buttons_box-forgot_block"></div>
</div>
</div>
</div>
To show the modal, my JS code is:
var modal = $("#forgot_block").modal();
modal.show();
I'm sure I'm missing something simple.

Answer 1

It seems you have combined Bootstrap 4 and Bootstrap 5 syntax. You have to decide:
Bootstrap 4 syntax:
var modal = $("#forgot_block").modal()
modal.modal('show');
Bootstrap 5 syntax:
var myModal = new bootstrap.Modal(document.getElementById('forgot_block'))
myModal.show();
Maybe I should have written jQuery and vanilla JS syntax, but you get the point.
Also, in your code you are missing 1 parenthesis in checkKey call between closing quotation marks'", it should be onkeyup="checkKey(event,'sendPassword_exec')"
After these changes the code works for me - modal fades in from top of the screen