Para exibir uma caixa de alerta customizada no bootstrap 3 utilize o código abaixo:
JS
var jbkrAlert = (function () { var criarModal = function () { var modal = $('<div class="modal modal-alerta"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"></div></div></div></div>'); modal.modal('show').on('hidden', function () { $('.modal-alerta').remove(); }); } var exibirAlerta = function (titulo, mensagem) { criarModal(); var conteudo = $('<div class="alert alert-warning">' + '<b><i class="icon-warning-sign"></i> ' + titulo + '</b></br>' + '' + mensagem + '' + '<button type="button" class="btn btn-warning" data-dismiss="modal">Fechar</button></div>'); $('.modal-alerta .modal-body').html(conteudo); }; var exibirErro = function (titulo, mensagem) { criarModal(); var conteudo = $('<div class="alert alert-danger">' + '<b><i class="icon-exclamation-sign"></i> ' + titulo + '</b></br>' + '' + mensagem + '' + '<button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button></div>'); $('.modal-alerta .modal-body').html(conteudo); }; var exibirSucesso = function (titulo, mensagem) { criarModal(); var conteudo = $('<div class="alert alert-success">' + '<b><i class="icon-info-sign"></i> ' + titulo + '</b></br>' + '' + mensagem + '' + '<button type="button" class="btn btn-success" data-dismiss="modal">Fechar</button></div>'); $('.modal-alerta .modal-body').html(conteudo); }; return { alerta: exibirAlerta, erro: exibirErro, sucesso: exibirSucesso }; })();
CSS
</pre> div.modal.modal-alerta.in button { position: absolute; bottom: 10px; right: 35px; } .modal-alerta .modal-content { background: transparent; } .modal-alerta .alert { margin: 0; } <pre>
Chamadas
$(document).ready(function () { esatAlert.sucesso('Titulo', 'Mensagem'); esatAlert.erro('Titulo', 'Mensagem'); esatAlert.alerta('Titulo', 'Mensagem'); });
This post first appeared on Dicas De Programação, Noticias E Informações R, please read the originial post: here