Generate Twitter-Bootstrap alert within the script itself at the click of a button

Question

Generate Twitter-Bootstrap alert within the script itself at the click of a button

Navigation

#1 by (1 votes)

2

I wonder if it's possible to create and open a Twitter-Bootstrap alert (.alert) with a custom message inside the script itself, without having to create the custom div outside the script and call it? When clicking the "myInput" button, create and open the alert with a message with the example below:

<input type='text' name='meuInput' id='meuInput'>

<button id='meuBtn' class='btn btn-default'>Continuar</button>

<script>
$(document).ready(function(){

    var meuInput = $("#meuInput").val();

    $("#meuBtn").on('click',function(){

      if(meuInput == "") {
        [ chamar um alerta com a mensagem personalizada dentro do script ]      
      }

    });
});
</script>

jquery twitter-bootstrap

asked by anonymous 14.12.2017 / 01:44

1 answer

Test with junit How to properly configure CORS in Spring Boot?

score 1 · Answer 1

You have a problem with your code that only checked the value of input on page load, but it was just put in the button event to be checked at all times of click on the button if it has value typed in input , example :

$(document).ready(function() {
  $("#meuBtn").on('click', function() {
    var meuInput = $("#meuInput").val();
    if (meuInput == "") {
      $(".bs-example-modal-sm").modal('show');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script><inputtype='text'name='meuInput'id='meuInput'class="form-control">
<button id='meuBtn' class='btn btn-default'>Continuar</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class=modal-header> <button type=button class=close data-dismiss=modal aria-label=Close><span aria-hidden=true>&times;</span></button>
        <h4 class=modal-title id="myLargeModalLabel">Alerta</h4>
      </div>
      <div class="modal-body">
        <p>Digite meu Input</p>
      </div>
    </div>
  </div>
</div>