js関数からブートストラップ・モーダルを呼び出す

Question

データ検証を行うJavaScript関数がありますが、データが間違っていると警告するために警告を使用しています。私がしたいのは、ブートストラップモーダルウィンドウを表示してエラーを表示することです。これは私がやったことなので、うまくいきません。 var contador = somevalue; window.validar = function (cual){ if(cual.value == -1){

} 
    if($("#muestragrafico1").is(':checked')){ 
     var cantidad = 3; 
    }else{ 
     var cantidad = 1; 
    } 
    if(cual.checked){ 
     contador++; 
    }else{ 
     contador--; 
    } 
    if(contador <= cantidad){ 
     return true; 
    }else{ 
     if (cantidad == 3) { 
      //alert("Solo puede seleccionar un máximo de "+cantidad+" sensores."); 
      $('#myModalExito').modal('show'); 

     } 

     if (cantidad == 1) { 
      alert("Solo puede seleccionar un máximo de "+cantidad+" sensores."); 
     } 
     contador--; 
     return false; 
    } 
}` 

 
 

<!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title"><?php echo L::Ticket_Succes?></h4> </div> 
    </div> 

</div> 

Answer 1

あなたは以下のように動的にエラーを表示することができます。

modalを動的に作成するための参照はhereです。

function showError(message, type) { 
 

 
    BootstrapDialog.show({ 
 
    title: (type == 1 ? 'Warning' : 'Error') + ' message', 
 
    message: message, 
 
    buttons: [{ 
 
     label: 'Close', 
 
     cssClass: (type == 1 ? 'btn btn-warning' : 'btn btn-danger'), 
 
     action: function(dialog) { 
 
     dialog.close(); 
 
     } 
 
    }] 
 
    }); 
 
} 
 

 

 

 
function validationFunction(i){ 
 
    
 
    if(i==0) 
 
    { 
 
    showError('This is error without type'); 
 
    return false; 
 
    } 
 
    else if(i==1) 
 
    { 
 
    showError('This is error with type id 0 (Error)(Default)',0); 
 
    return false; 
 
    } 
 
    else if(i==2) 
 
    { 
 
    showError('This is error with type id 1 (Warning)',1); 
 
    return false; 
 
    } 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> 
 

 

 

 

 

 
<button onclick="validationFunction(0)">Error modal 1</button> 
 

 
<button onclick="validationFunction(1)">Error modal 2</button> 
 
<button onclick="validationFunction(2)">Warning modal 1</button>