从模态对话框打开模态警报

Question

那里！

在.cshtml中，我有以下 div em>元素，该元素可在选择某个无线电选项时显示模态对话框：

<div id="modalDesembolsos" class="modal modaldesembolso" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Informe dos valores anuais de desembolso</h4>
            </div>
            <div class="modal-body">
                <div class="panel panel-info">
                    <div class="panel-body">
                        <div class="panel">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th class="text-center">Ano</th>
                                        <th class="text-right">Valor</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            @Html.DropDownListFor(model => model.Anos, new SelectList(Model.Anos), htmlAttributes: new { @class = "form-control text-right" })
                                        </td>
                                        <td class="text-right">
                                            <input type="number" id="valorAno" name="valorAno" class="dinheiro form-control" />
                                        </td>
                                        <th class="text-center"><input type="button" id="btnIncluiValorAnual" name="btnIncluiValorAnual" class="btn btn-success btn-sm" value="+" title="Inclui ano/valor" /></th>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <table id="tblRateio" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th class="text-center">Ano</th>
                                    <th class="text-center">Valor</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div class="panel-footer">
                        <h4 class="acumulador text-right"></h4>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btnok" data-dissmiss="modal"> Ok </button>
                <button type="button" class="btn btn-default btncancela" data-dismiss="modal" aria-hidden="true" aria-label="Fechar"> Cancelar </button>
            </div>
        </div>
    </div>
</div>

当用户单击 Ok 按钮时，将运行以下 jQuery 函数：

        $('.btnok').click(function () {
            var acumulado = 0;
            $('#tblRateio > tbody > tr').each(function () {
                var anoGasto = $(this).find('.ano').text();
                var valor = parseFloat($(this).find(".valor").text().replace(/\./g, "").replace(",", "."));
                var desembolso = {
                    Ano: anoGasto,
                    Valor: valor
                };
                acumulado += valor;
                lstDesembolsos.push(desembolso);
            });
            if ($('#Valor').maskMoney('unmasked')[0] > acumulado) {
                lstDesembolsos = [];
                mostraMensagem("Inclusão de Item", "aviso", "A soma dos valores informados para desembolso é menor que o valor do item!");
                return false;
            }
            fecharModal();
        });

对于表 tblRateio 的每一行，它对具有类 valor 的列的值求和。然后将这个累积值与另一个元素值进行比较。如果此比较失败，我想显示一条警报消息（但不是来自 js 的丑陋消息）。我希望它充当模式警报。这就是为什么我编写了具有以下代码的函数 mostraMensagem：

function mostraMensagem(titulo, tipo, msg) {
    var classe = "";
    $('.modal-title').html(titulo);
    switch (tipo) {
        case "erro":
            classe = "alert-danger";
            break;
        case "sucesso":
            classe = "alert-success";
            break;
        case "info":
            classe = "alert-info";
            break;
        case "aviso":
            classe = "alert-warning";
            break;
    }
    $('.corpomensagem').addClass(classe);
    $('.corpomensagem').html(msg);
    $('#mensagens').show();
}

该模式的标记如下：

<div class="modal " id="mensagens" role="alert" tabindex="-2">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close fecharmensagens" data-dissmiss="modal" aria-hidden="true" aria-label="Fechar">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <p class="corpomensagem alert"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary fecharmensagens" data-dissmiss="modal"> Ok </button>
            </div>
        </div>
    </div>
</div>

因此，正在发生的情况是，此模态警报消息是在模态对话框“后面”加载的。只有当模态对话框关闭时，用户才能看到模态警报消息。当然这不是目标。

我应该怎么做才能实现我的目标？

感谢您的帮助。

最好的问候。 保罗·里卡多·费雷拉

Answer 1

尝试设置警报模式的 z-index。将其设置为比隐藏它的模式更多。

CSS

#mensagens {
   z-index:1550; 
/*1550 just for example, this should be more then the modal that is in foreground*/
}