To open a modal, place this line $('#idModal').modal('show')l
in the places of alerts, setting a id
for success and another for error.
Create two modes, one for success and one for error, with the respective ids set above.
Bootstrap Modal
Library
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Your Script
$http.post("http://localhost:8080/rest/tarefas", $scope.tarefa)
.success(function(data, status, headers, config) {
$(document).ready(function(){
$("#myModalSucess").modal('show');
});
$scope.buscaTarefa();
}).error(function(data, status, headers, config) {
$(document).ready(function(){
$("#myModalError").modal('show');
});
});
$scope.buscaTarefa();
$route.reload();
HTML
<!-- Modal HTML Erro -->
<div id="myModalError" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Erro</h4>
</div>
<div class="modal-body">
<p>Erro campo de preenchimento obrigatorio </p>
<p class="text-warning"><small>Erro Erro Erro Erro Erro Erro </small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal HTML Sucesso -->
<div id="myModalSucess" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Sucesso </h4>
</div>
<div class="modal-body">
<p>Tarefa Adicionada com sucesso. </p>
<p class="text-warning"><small>Sucesso Sucesso Sucesso Sucesso Sucesso Sucesso .</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
take a look at this jquery library > http://dev.iceburg.net/jquery/jqModal/ may be useful, but I believe what you need can be found in this tutorial: > https://www.codeproject.com/Articles/28812/Custom-Alert-Boxes-using-JavaScript-the-- good luck
– usuário reconhecido
Why don’t you a plugin
alert
, that’s what you want???– novic