Bootstrap 5 模态不显示淡入淡出 Class

Question

当我将淡入淡出 class 添加到我的 Bootstrap 5 模态时，它没有显示。如果我删除 class，对话框会显示，但正文不会变灰，模态也不会显示动画。我的 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 语法。你必须决定：

Bootstrap 4 语法：

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

Bootstrap 5 语法：

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

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

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

经过这些更改后代码对我有用 - 模式从屏幕顶部淡入

Bootstrap 5 模态不显示淡入淡出 Class

Bootstrap 5 Modal Doesn't Show with Fade Class

modal-dialog

bootstrap-5