Question

有！

在.cshtml中，我有以下 div 元素，当选择某个单选选项时，该元素将显示模式对话框：

＆＃13;

<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>

＆＃13;

当用户单击“确定”按钮时，将运行以下jQuery函数：

＆＃13;

        $('.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();
        });

＆＃13;

对于表 tblRateio 的每一行，它将具有类 valor 的列的值相加。然后将累积的数据与另一个元素值进行比较。如果这个比较失败，我想显示一条警告信息（但不是那个来自js的丑陋信息）。我希望它充当模态警报。这就是我编写具有以下代码的函数 mostraMensagem 的原因：

＆＃13;

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();
}

＆＃13;

该模式的标记如下：

＆＃13;

<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>

＆＃13;

所以，正在发生的是这个模态警报消息被加载＆＃34;后面＆＃34;模态对话框。仅当模态对话框关闭时，用户才能看到模态警报消息。当然，这不是目标。

我该怎样做才能实现目标？

感谢您的帮助。

祝你好运。保罗里卡多费雷拉

Answer 1

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

<强> CSS

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

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

1 个答案: