Shefarol Soluções Web

Bootbox - Voltar

Veja os exemplos de Bootbox

Mais informações em bootboxjs.com

 

Importe o Bootbox via CDN
<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 do Javascript
//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);
});