Conrado Saud Programador

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.

contato@conradosaud.com.br

Conheça meu trabalho

Diálogos flutuantes e temporizados para notificações rápidas ao usuário!

Escrito por Conrado Saud

contato@conradosaud.com.br

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:
Tags: dialogo, jquery, bootstrap, alert

Voltar ao início
Publicado em   02/09/2017

Topo

Faça um comentário a respeito deste artigo!