无法显示引导模式，只有背景答案

【问题标题】：Can't display boostrap modal, only backdrop无法显示引导模式，只有背景
【发布时间】：2021-05-27 01:27:33
【问题描述】：

基本上我是在登录成功后尝试调用一个模式，代码如下：

<div id="modalOpt" class="modal" role="dialog">
    <div class="modal-dialog-OptIn">
        <div class="modal-content-OptIn">
            <div>
            </div>
            <div class="modal-body-text">
                <p class="title-text">Autorização de envio de agenda</p>
                <p class="subTitle">Autorizo as instituições x1 e x2 a
                     consultarem toda a minha agenda de recebíveis na Única. </p>
                <p class="subTitle">Autorizando, você terá os seguintes benefícios:</p>
                <ul class="bullet">
                    <li class="bulletItems">Operações e produtos pré-aprovados</li>
                    <li class="bulletItems">Melhores negociações de taxas</li>
                </ul>
                <div class="row-modal">
                    <button class="btnOptIn-1" data-target="#success" data-toggle="modal" data-dismiss="modal">
                        Permitir
                    </button>
                    <button class="btnOptIn-2" data-dismiss="modal">
                        Decidir depois                  
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

我在 login.js 中调用这个模式，像这样：

const onEventSuccessLogin = () => {
        onNavegarDashboard();
        $('#modalOpt').modal({backdrop: 'static', keyboard: false, show: true});
    }

但是由于某种原因，模态本身没有出现，只有模态背景，我已经尝试更改z-index，但它不起作用。

我设法显示模式的唯一方法是将 html 放在 index.html 中，但是一旦我这样做了，然后我（在浏览器中）返回到登录页面，html 就会固定在屏幕上一段时间原因。

毕竟，我想修复这个错误，所以我将 html 放在 login.html 中，然后我遇到了 modal-backdrop 的问题，并且没有调用模态。

有什么建议吗？

这里有一个截图来澄清：

【问题讨论】：

标签： javascript html modal-dialog bootstrap-modal

【解决方案1】：

尝试更改您的第一行

<div id="modalOpt" class="modal" role="dialog">

到

 <div id="modalOpt" class="modal fade in" role="dialog">

或者，只需将一个“淡入”类添加到您的初始模态类中，不太清楚为什么会发生这种情况。

【讨论】：