Bootstrap 3 Alert Dialog

Para exibir uma caixa de alerta customizada no bootstrap 3 utilize o código abaixo:

JS

[javascript]

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
};
})();

[/javascript]

CSS

[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>
[/css]

Chamadas

[javascript]
$(document).ready(function () {
esatAlert.sucesso(‘Titulo’, ‘Mensagem’);
esatAlert.erro(‘Titulo’, ‘Mensagem’);
esatAlert.alerta(‘Titulo’, ‘Mensagem’);
});
[/javascript]