4

Estou fazendo um sistema web usando php + javascript + bootstrap, eu preciso fazer uma confirmação de exclusão usando o bootstrap, tipo um alert solicitando sim ou não, porém em um modelo bonito hehehe, o bootstrap tem algum componente pra resolver essa situação?

1
  • Dá para usar o modal. Commented 14/12/2016 às 15:28

3 Respostas 3

5

Existe um plugin chamado Bootbox com ele você pode exibir alerts, confirms, prompts e dialogos customizados de qualquer jeito.

Exemplo:

bootbox.confirm({
  message:'Confirma a exclusão do registro?',
  callback: function(confirmacao){

    if (confirmacao)
      bootbox.alert('Registro excluído com sucesso.');
    else
      bootbox.alert('Operação cancelada.');
  
  },
  buttons: {
    cancel: {label: 'Cancelar',className:'btn-default'},
    confirm: {label: 'EXCLUIR',className:'btn-danger'}
    
  }
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

Na documentação você encontra mais formas de como utilizar a biblioteca.

4

Olha aqui, podes fazer isso, só tens de ajustar o link do botão para onde quiseres:

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#confirm">Confirmação</button>

<div class="modal fade" id="confirm" role="dialog">
  <div class="modal-dialog modal-md">

    <div class="modal-content">
      <div class="modal-body">
            <p> QUER REALMENTE FAZER ISSO?? NÂO POR FAVOR, EU TENHO FILHOS</p>
      </div>
      <div class="modal-footer">
        <a href="wfefwe" type="button" class="btn btn-danger" id="delete">Apagar Registo</a>
            <button type="button" data-dismiss="modal" class="btn btn-default">Cancelar</button>
      </div>
    </div>

  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

2

Você pode também utilizar o SweetAlert que é um ótimo plugin para alerts:

function alert_it(){
  swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false
},
function(){
  swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
}
<link href="https://rawgit.com/t4t5/sweetalert/master/dist/sweetalert.css" rel="stylesheet"/>
<script src="https://rawgit.com/t4t5/sweetalert/master/dist/sweetalert.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="alert_it()">Excluir</button>

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