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