4

Como faço para ao invés de chamar esse alert padrão do navegador(de confirmação de adição) chamar uma tela definida por mim? ou manipular esse alert e conseguir aplicar o css.

$http.post("http://localhost:8080/rest/tarefas", $scope.tarefa)
    .success(function(data, status, headers, config) {
        alert('Tarefa Adicionada com sucesso');
        $scope.buscaTarefa();
    }).error(function(data, status, headers, config) {
        alert('error');
    });
    $scope.buscaTarefa();
    $route.reload();
2

1 Resposta 1

1

Para abrir um modal, coloque essa linha $('#idModal').modal('show')l nos lugares dos alertas, setando um id para sucesso e outro para erro.

Crie dois modais, um para sucesso e outro para erro, com os respectivos ids setados acima.

Bootstrap Modal

Biblioteca

<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>

Seu 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">&times;</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">&times;</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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .