Confirmation of exclusion with bootstrap [closed]

2

I'm doing a web system using php + javascript + bootstrap, I need to do a commit confirmation using bootstrap, type an alert requesting yes or no, but in a nice hehehe model, the bootstrap has some component to solve this situation ?

    
asked by anonymous 14.12.2016 / 16:22

3 answers

4

Look here, you can do this, just adjust the button link 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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
14.12.2016 / 16:31
3

There is a plugin called Bootbox with it you can view alerts, confirmations, prompts and custom dialogs anyway.

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><scriptsrc="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 documentation you find more ways to use the library.

    
14.12.2016 / 16:48
1

You can also use 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><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="alert_it()">Excluir</button>
    
19.12.2016 / 18:18