显示模态对话框时，模态淡入淡出选项不应用淡入淡出

问题描述

我需要在页面加载时弹出一个 Modal弹出窗口，这与jquery一样。 Bootstrap文档建议可以添加一个我拥有的fade选项（见下图-使用Bootstrap Studio）

enter image description here

我将“模态”对话框拖放到页面底部（在页脚上方），然后添加ID dialogVault并设置淡入淡出选项。

下面的代码是在 Chrome开发者控制台

中呈现的HTML

<div class="modal fade shadow-lg show" role="dialog" tabindex="-1" id="dialogVault" aria-modal="true" style="padding-right: 17px; display: block;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Setup Vault</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button></div>
            <div class="modal-body">
                <p style="margin-bottom: 0px">Your Banking information is stored in a secure vault.</p><label style="padding-top: 16px;"><strong>Create Vault Password</strong></label>
                <div class="input-group" style="padding-bottom: 16px;">
                    <div class="input-group-prepend"><span>Vault Password</span></div><input class="form-control" type="text" id="edtVaultPassword" placeholder="Enter Vault Password" name="edtVaultPassword"></div>
                <div class="input-group" style="padding-bottom: 16px;">
                    <div class="input-group-prepend"><span>Confirm Password</span></div><input class="form-control" type="text" id="edtVaultPassword-1" placeholder="Confirm Vault Password" name="edtVaultPassword"></div>
                <p style="padding-top: 0px"><em>Never share this password with anyone</em></p>
            </div>
            <div class="modal-footer justify-content-around"><button class="btn btn-light" type="button" data-dismiss="modal">Cancel</button><button class="btn btn-primary" type="button">Set Password</button></div>
        </div>
    </div>
</div>

或更简洁的屏幕截图

enter image description here

问题：

根据引导docs，调用

$('#dialogVault').modal({show: true});

应显示该对话框并添加淡入淡出选项（如果出现在根模式容器中），但是它不会淡入淡出（请参见下图）

enter image description here

这些是我的脚本导入

<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.5.0/js/bootstrap4-toggle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>

我做错了什么？

经过一些设置后，我发现背景的应用不正确，但是引导CSS（可能的错误）？

未显示模式

模态显示为白色背景

根据需要显示具有50% #000背景不透明度的模式。

这是引导程序错误吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-4 bootstrap-modal javascript jquery twitter-bootstrap