Nesse artigo falarei sobre um assunto muito procurado em fóruns. Raros são os desenvolvedores que não já sentiram vontade de dar estilo nas caixas de alert e confirm padrão do browser.
Para quem ainda não sabe, estou falando dessas caixinhas:
Vocês devem concordar comigo que, para uma aplicação simples é interessante, mas para alguma mais profissional, é sempre bom produzir alguma coisa mais personalizada.
Ao final desse artigo, seremos capazes de deixar as caixinhas assim:
Para fazer isso, utilizei o JQuery e seus Plugins (parace até nome de banda de música!). O JQuery nada mais é do que um framework que facilita a vida dos desenvolvedores com soluções prontas para problemas do cotidiano. Os plugins são uma especialização desse framework.
Sobre JQuery: http://jquery.com/
Plugins do JQuery: http://docs.jquery.com/Plugins
Nesse artigo utilizaremos o Plugin JQModal: http://dev.iceburg.net/jquery/jqModal/
Na página acima você pode localizar diversos exemplos de utilização deste poderoso plugin.
Vamos ao desenvolvimento?
Código HTML
Não abordarei o código HTML por não ser o escopo desse artigo e por ser muito particular para cada aplicação, mas você pode conferir o resultado final aqui:
Você pode alterar os blocos que geram os alerts de acordo com a sua necessidade. Se você for um programador inexperiente, não aconselho que altere a estrutura dos botões, ou seja, dos elementos input tipo submit. O resto pode mudar!
Código CSS
Também não abordarei o código CSS por não ser o escopo desse artigo e por ser muito particular para cada aplicação, mas você pode conferir o conteúdo do nosso arquivo estilo.css aqui.
Código Javascript
Nosso script é um pouco simples, mesmo assim requer um pouco de atenção e consultas nas páginas do JQModal para obter mais informações a respeito de todas as opções de personalização.
Você pode ver o conteúdo dos arquivos javascript aqui:
Vamos analisar o nosso código linha por linha. Para facilitar, acompanhe a imagem abaixo.
Linha 1: Abre a função que será executada quando o documento estiver pronto, ou seja, quando a nossa página estiver carregada. Você pode ter visto isso de forma semelhante com
window.onload = function() {
Existem também outras formas de fazer, utilizando adicionadores de eventos. Precisamos fazer com que o código seja executado somente após o carregamento completo da página para garantirmos que os elementos que estão sendo referenciados existam.
Linha 2: Adiciona o evento jqm ao elemento cujo id é ‘alert’. Veja o elemento no código HTML.
Linha 3: Nível de transparência do elemento que cobrirá o conteúdo da página ao exibir o alert ou confirm. Esse valor varia de 0 a 100, onde 0 é transparência total e 100 é opacidade total.
Linha 4: Classe (CSS) que cobrirá o conteúdo da página ao exibir o alert. Veja como defini no arquivo CSS. Se você olhar no resultado final do nosso exemplo, verá que esse elemento é o elemento com fundo preto “transparente”, que cobre o conteúdo original do documento.
Linha 5: Define se o conteúdo da página ficará ou não habilitado para interações durante a exibição do alert ou confirm. Se definido como true, o usuário não pode fazer nada antes de fechar o alert ou confirm. Se definido como false, o usuário será capaz de interagir mesmo com o alert ou confirm em exibição. Recomendo deixar em true.
Linha 6: Nesta linha dizemos que o alert ou confirm não aparecerá/desaparecerá com o click de um ‘trigger’, ou seja, não será necessário que o usuário clique em algum objeto. Os outros valores possíveis são: elementos CSS (ex.: “#teste”, “.link”, etc.) ou elementos DOM (ex.: document.getElementById(“trigger”))
Linhas 8 a 13: Repetição das linhas 2 a 7, fazendo o mesmo para o elemento cujo id é ‘confirm’.
Linha 14: Chamamos a função confirm. Repare que a chamada está um pouco diferente da forma padrão. No padrão, só passamos como parâmetro a mensagem e ela retorna true ou false de acordo com o botão clicado. No nosso caso, passamos um segundo parâmetro que será executado com o clique no botão ‘Sim’. Esse parâmetro (se for uma string) será entendido como uma URL que será chamada. Caso não seja uma string, será interpretada como uma função javascript que será executada ao clicar no botão ‘Sim’.
Um exemplo de chamada da função alert seria: alert(‘Blog do tmferreira!’);
Linha 16: Agora o bicho começa a esquentar!! Vamos reescrever a função alert padrão do javascript!.
Linha 17: Dizemos que estamos utilizando o elemento cujo id é ‘alert’.
Linha 18: Exibimos o alert, fazendo o elemento ‘alert’ deixar de ser oculto (foi ocultado via CSS).
Linha 19: Selecionamos o elemento ‘div’ que tem class igual a ‘jqmAlertContent’.
Linha 20: Colocamos no elemento selecionado acima a mensagem passada. No nosso caso eu coloquei também uma imagem para ficar mais apresentável.
Linha 21: Fim da seleção do elemento selecionado na linha 13.
Linha 22: Selecionamos os botões tipo submit visíveis.
Linhas 23 e 24: Adicionamos ao evento click do botão o código que ocultará o nosso alert. Isso fará com que, após o clique do botão, nosso alert seja fechado.
Linha 27: Vamos reescrever a função confirm padrão. Repare no argumento callback, que será a página ou função executada ao clicar no botão ‘Sim’.
Linha 28: Dizemos que estamos utilizando o elemento cujo id é ‘confirm’.
Linha 29: Exibimos o confirm, fazendo o elemento ‘comfirm’ deixar de ser oculto (foi ocultado via CSS).
Linha 30: Selecionamos o elemento ‘div’ que tem class igual a ‘jqmConfirmMsg’.
Linha 31: Colocamos no elemento selecionado acima a mensagem passada. No nosso caso eu coloquei também uma imagem para ficar mais apresentável.
Linha 32: Fim da seleção do elemento selecionado na linha 13.
Linha 33: Selecionamos os botões tipo submit visíveis.
Linhas 34 a 38: Adicionamos ao evento click do botão ‘Sim’ o código (página ou função) que será executado com o clique nesse botão. Se você alterar o value do botão que defini como ‘Sim’, deve alterar também essa linha.
Linha 39: Ainda adiciona (em todos os submits) o código que faz ocultar o nosso confirm.
Conclusão
A intenção não é que copiem e colem esses arquivos e códigos em seus projetos. Pelo menos não o HTML e CSS. Isso é muito particular. Caso mudem o HTML, muito provavelmente deverão fazer ajustes no javascript. Sugiro que contrate um profissional para fazer essa modificação, caso você seja leigo ou inexperiente. Claro que também poderão existir algumas modificações no funcionamento, mas a idéia foi passada e agora cada um deve fazer a sua parte.
Espero seus comentários! Abraços a todos!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?