Escrevo neste blog, códigos e teorias de programação que desenvolvo e são úteis para mim.
Pelo mesmo, espero que seja útil para você. Todo conteúdo aqui é público e gratuito.
Há um tempo atrás eu estava precisando disparar mensagens na tela para o usuário como "Seu cadastro foi realizado com sucesso", ou mensagens
de erro nos formulários, mas eu precisava fazer isso de uma forma bem simples que não fosse um alert do javascript todo feio e que travasse
a página, e que também não fosse uma div que ficasse no meio do formulário ocupando espaço.
Depois de procurar na internet algumas soluções, eu até acabei encontrando algo aqui e outro ali, mas para implementar você precisaria
baixar arquivos de css e javascript separados para tudo funcionar, e tudo vinha acompanhado de muito código. Resumidamente, era
muita coisa para algo simples de mais de se fazer, então depois de não encontrar algo que pudesse me satisfazer,
eu tive que fazer o meu próprio dialogo, e para isso, utilizei
os layouts de alert do Bootstrap e com um pouco de jQuery consegui ajeitar da forma que eu precisava.
Veja como ficou:
Legal, não é? E é muito simples implementar esse tipo de função no seu site, você vai precisar apenas de uma função no seu arquivo principal
javascript. Lembrando que para este exemplo estou utilizando o Bootstrap para criar as divs de alert.
Veja o código, basta copiar e colar no seu projeto:
function mostraDialogo(mensagem, tipo, tempo){
// se houver outro alert desse sendo exibido, cancela essa requisição
if($("#message").is(":visible")){
return false;
}
// se não setar o tempo, o padrão é 3 segundos
if(!tempo){
var tempo = 3000;
}
// se não setar o tipo, o padrão é alert-info
if(!tipo){
var tipo = "info";
}
// monta o css da mensagem para que fique flutuando na frente de todos elementos da página
var cssMessage = "display: block; position: fixed; top: 0; left: 20%; right: 20%; width: 60%; padding-top: 10px; z-index: 9999";
var cssInner = "margin: 0 auto; box-shadow: 1px 1px 5px black;";
// monta o html da mensagem com Bootstrap
var dialogo = "";
dialogo += '<div id="message" style="'+cssMessage+'">';
dialogo += ' <div class="alert alert-'+tipo+' alert-dismissable" style="'+cssInner+'">';
dialogo += ' <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>';
dialogo += mensagem;
dialogo += ' </div>';
dialogo += '</div>';
// adiciona ao body a mensagem com o efeito de fade
$("body").append(dialogo);
$("#message").hide();
$("#message").fadeIn(200);
// contador de tempo para a mensagem sumir
setTimeout(function() {
$('#message').fadeOut(300, function(){
$(this).remove();
});
}, tempo); // milliseconds
}
Basta inserir essa função no seu arquivo .js e você poderá chamar a função mostraDialogo() de qualquer lugar
do seu código. É bem fácil sua implementação e funciona muito bem.
Na variável cssMessage você pode moldar alguns aspectos, pois como fiz nos botões de exemplo, você pode alterar
a posição dele para que apareça a mensagem na parte inferior da tela do usuário e até mesmo no meio da tela. É importante também
utilizar a propriedade do z-index em 9999 para que tenha certeza de que nenhum elemento irá ocultá-la na página.
Além disso, eu optei por verificar se ao emitir a mensagem, se já existe outra mensagem na tela, e neste caso, cancelar a nova
solicitação, pois dessa forma você pode evitar alguns bugs com o css, principalmente se tratando do z-index, mas você pode
configurar da forma que achar melhor.
É um código bem simples que pode ser utilizado de diversas formas, a melhor delas é no momento em que você precisa enviar uma mensagem
ao usuário sem que cause tanto impacto no html mas que você consiga notificá-lo, como por exemplo, ao realizar um cadastro ou alterar
alguma informação, você pode simplesmente emitir a seguinte mensagem:
var mensagem = "<strong>Informações alteradas com sucesso!</strong><br>Suas informações foram alteradas e já podem ser visualizadas no painel.";
mostraDialogo(mensagem, "success", 2500);
Este foi um artigo bem curto, porém é uma funcionalidade a mais que você pode estar inserindo no seu projeto, enriquecendo-o.
Se você gosta deste tipo de conteúdo, curta a
página do blog no Facebook, pois assim você será notificado de novos artigos sempre que forem publicados!
Obrigado por sua presença aqui, e confira abaixo os outros artigos relacionados a este com outras implementações que você pode
inserir em seus formulário que juntamnte com este dialogo simples e bonito deixarão sua ferramenta mais completa!
Este artigo lhe ajudou? Você pode retribuir o favor curtindo minha página no Facebook: