Customizando as funções alert e confirm

Boa noite galera,

começando aqui meu primeiro post, portanto peguem leve! ehehehe

Bem, quem nunca nunca pensou : “Não seria legal se o alert do navegador ficasse com o layout  da minha aplicação?”

Mas, isso é possível? Sim, de fato, é possível e não é complicado, então vamos lá mãos à obra!

Pré-requisitos: jQuery e jQuery UI

Vamos começar com a função alert:
O que tem que ser feito é adicionar o código javascript, que vai sobrescrever a função alert, em seu html:

O jQuery UI possui um componente chamadado Dialog,
o que faremos é substituir a implementação padrão do alert pela do jQuery UI.
A função dialog é aplicada em uma div, portanto precisamos adicionar uma div, que vai servir de “alert”,
no nosso html dessa forma:

agora o que temos que fazer é que o nosso alert chame a função dialog assim:

Como nossa div estava vazia, na primeira linha estamos adicionando a mensagem que queríamos mostrar e
na segunda estamos invocando nosso dialog.

Agora vamos para a segunda parte : a função confirm

A função confirm nativa fica aguardando o usuário clicar no ok ou cancelar , o grande problema é este comportamento não é possível de ser reproduzido, o que pode ser feito é uma “sobrecarga” na função confirm onde passaremos a função a ser executada quando o usuário clicar em ok:

Para completar, precisamos colocar a div que vai ser usada como confirm no html:

Pronto agora temos as funções alert e confirm customizadas para nosso layout!
Quem quiser dar uma olhada, no meu github tem uma implementação mais elegante que eu fiz, também utilizando o jQuery UI. Vou ficando por aqui.
Boa noite galera, até o próximo post!

Anúncios