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?
3 Respostas
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.
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>
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>