Delete confirmation with bootstrap

Asked

Viewed 9,438 times

4

I’m making a web system using php + javascript + bootstrap, I need to make a delete confirmation using bootstrap, like an Alert asking yes or no, but in a beautiful model hehehe, the bootstrap has some component to solve this situation?

javascript twitter-bootstrap bootstrap-3

  • You can use the modal.

3 answers

5

There is a plugin called Bootbox with it you can display Alerts, confirms, prompts and custom dialogs in any way.

Example:

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>

In the documentation you find more ways to use the library.

4

Look here, you can do that, you just have to adjust the button link to wherever you want:

 
<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

You can also use the Sweetalert which is a great plugin for 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>

Browser other questions tagged javascript twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.