Bootstrap 5 Modal 不显示 Fade 类

Question

当我将淡入淡出类添加到我的 Bootstrap 5 模式时，它没有显示。如果我删除该类，则会显示对话框，但主体不会变灰，模式也不会动画。我的 HTML 是：

 <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>

为了显示模态，我的JS代码是：

var modal = $("#forgot_block").modal();
modal.show();

我确定我错过了一些简单的东西。

Answer 1

您似乎结合了 Bootstrap 4 和 Bootstrap 5 语法。你必须决定：

引导程序 4 语法：

var modal = $("#forgot_block").modal()
modal.modal('show');

引导 5 语法：

var myModal = new bootstrap.Modal(document.getElementById('forgot_block'))
myModal.show();

也许我应该编写 jQuery 和 vanilla JS 语法，但你明白了。

另外，在您的代码中，您在右引号之间的 checkKey 调用中缺少 1 个括号'"，它应该是 onkeyup="checkKey(event,'sendPassword_exec')"

在这些更改之后，代码对我有效 - 模式从屏幕顶部淡入