从模态对话框

Question

打开模态报警！

在.cshtml我有以下DIV当选择某个无线电选项被显示作用的模态对话框元件：

<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的每一行，它求和具有类勇气列的值。然后将这个累积值与另一个元素值进行比较。如果这个比较失败，我想显示一条警告消息（但不是来自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>

所以，发生什么事情g是这个模态警报消息被加载到模态对话框的“后面”。只有当模式对话框关闭时，用户才能看到模态警报消息。当然，这不是目标。

我该怎么做才能完成我的目标？

感谢您的帮助。

此致敬礼。 Paulo Ricardo Ferreira

Answer 1

尝试设置警报模式的z索引。设置它比隐藏它的模式更多。

CSS

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