Veja os exemplos de Bootbox
Mais informações em bootboxjs.com
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js"></script>
Logo abaixo codifique a chamada do seu Bootbox
//Exemplo "pequeno"
$(document).on("click", ".pequeno", function(e) {
bootbox.alert({
size: "small",
title: "BootBox pequeno",
message: "Aqui o texto da janela do BootBox",
});
});
//Exemplo "médio"
$(document).on("click", ".medio", function(e) {
bootbox.alert({
size: "",
title: "BootBox médio",
message: "Aqui o texto da janela do BootBox",
});
});
//Exemplo "grande"
$(document).on("click", ".grande", function(e) {
bootbox.alert({
size: "large",
title: "BootBox grande",
message: "Aqui o texto da janela do BootBox",
});
});
//Exemplo "pergunta 1"
$(document).on("click", ".pergunta1", function(e) {
bootbox.confirm("Você quer excluir?", function(result){
if (result) {
bootbox.alert({
size: "sm",
title: "Excluído",
message: "Registro excluído com sucesso",
});
}
});
});
//Exemplo "pergunta 2"
$(document).on("click", ".pergunta2", function(e) {
bootbox.confirm({
message: "Você quer excluir?",
buttons: {
confirm: {
label: 'Sim',
className: 'btn-success'
},
cancel: {
label: 'Não',
className: 'btn-danger'
}
},
callback: function (result) {
message: 'Você selecionou: ' + result;
}
});
});
//Exemplo "prompt"
$(document).on("click", ".prompt", function(e) {
bootbox.prompt("Digite seu nome:", function(result){
if (result) {
bootbox.alert({
size: "sm",
title: "Seja bem vindo",
message: "Olá " + result,
});
}
});
});
//Exemplo "checkbox"
$(document).on("click", ".escolha1", function(e) {
bootbox.prompt({
title: "Selecione a opção desejada",
message: '<p>Você pode escolher mais de uma opção:</p>',
//value: ['1', '3'],
inputType: 'checkbox',
inputOptions: [{
text: 'Opção 1',
value: '1',
},
{
text: 'Opção 2',
value: '2',
},
{
text: 'Opção 3',
value: '3',
}],
callback: function (result) {
bootbox.alert({
size: "sm",
title: "Seja bem vindo",
message: "Opção escolhida: " + result,
});
}
});
});
//Exemplo "radio"
$(document).on("click", ".escolha2", function(e) {
bootbox.prompt({
title: "Escolha uma opção!",
message: '<p>Você só pode escolher uma opção:</p>',
inputType: 'radio',
inputOptions: [
{
text: 'Opção 1',
value: '1',
},
{
text: 'Opção 2',
value: '2',
},
{
text: 'Opção 3',
value: '3',
}
],
callback: function (result) {
bootbox.alert({
size: "sm",
title: "Seja bem vindo",
message: "Opção escolhida: " + result,
});
}
});
});
//Exemplo "email"
$(document).on("click", ".e_mail", function(e) {
bootbox.prompt({
title: "Digite seu e-mail!",
inputType: 'email',
callback: function (result) {
bootbox.alert({
size: "sm",
title: "Seja bem vindo",
message: "Seu e-mail: " + result,
});
}
});
});
//Exemplo "password"
$(document).on("click", ".senha", function(e) {
bootbox.prompt({
title: "Digite sua senha!",
inputType: 'password',
callback: function (result) {
bootbox.alert({
size: "sm",
title: "Seja bem vindo",
message: "Sua senha está ok",
});
}
});
});
//Exemplo "select"
$(document).on("click", ".selecione", function(e) {
bootbox.prompt({
title: "Selecione sua opção!",
inputType: 'select',
inputOptions: [
{
text: 'Selecione...',
value: '',
},
{
text: 'Primeira opção',
value: 'primeira',
},
{
text: 'Segunda opção',
value: 'segunda',
},
{
text: 'Terceira opção',
value: 'terceira',
}
],
callback: function (result) {
bootbox.alert({
size: "sm",
title: "Seja bem vindo",
message: "Sua escolha: " + result,
});
}
});
});
//Exemplo "textarea"
$(document).on("click", ".comentario", function(e) {
bootbox.prompt({
title: "Deixe seu comentário!",
inputType: 'textarea',
callback: function (result) {
bootbox.alert({
size: "sm",
title: "Seja bem vindo",
message: "Seu comentário: " + result,
});
}
});
});
//Exemplo "modal"
$(document).on("click", ".mensagem", function(e) {
var dialog = bootbox.dialog({
message: '<p class="text-center text-primary mb-0"><i class="fa fa-spin fa-cog"></i> <span class="text-dark">Por favor, aguarde um momento...</span></p>',
centerVertical: true,
closeButton: false
});
// escondendo a mensagem
setTimeout(function(){
dialog.modal('hide');
}, 3000);
});