從模態對話框

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*/ 
}