时间戳

首页 > 解决方案 > 无法显示自举模式，只有背景

javascript - 无法显示自举模式，只有背景

问题描述

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

<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 的问题，并且没有调用模态。

有什么建议么？

这是一个屏幕截图来澄清：

模态没有被调用，只有模态背景

标签： javascripthtmlmodal-dialogbootstrap-modal

解决方案

尝试将您的第一行从

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

至

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

或者，只需在您的初始模式类中添加一个“淡入”类，不太确定为什么会发生这种情况。

推荐阅读