Bootstrap 3 Alert Dialog

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

Artigos Relacionados:

3 comentários em “Bootstrap 3 Alert Dialog

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *