» Início » Desenvolvimento » Ajax » Sobrescrevendo função Alert do Javascript

Avaliação: | Publicado em: 17/08/2007

Sobrescrevendo função Alert do Javascript

Luciano Bianchi é desenvolvedor Java, trabalha com desenvolvimento de sistemas pra web há mais de 4 anos, onde já atuou em grandes empresas como o Banco do Brasil, desenvolvendo no centro de tecnologia.

Satisfação,

preparei este artigo pois agora com as possibilidades da web 2.0 e a mais nova moda da internet, o AJAX, vemos várias aplicações utilizando componentes UI que bloqueiam o browser e exibem determinada mensagem na tela.

Uma outra alternativa para se fazer isso, seria sobrescrever a função alert do javascript, podendo personalizar a janela da forma que desejar, pois o grande problema de se utilizar vários alerts em uma aplicação web moderna é o design ultrapassado e sem recursos do alert.

Para tal tarefa utilizaremos o plugin jQuery, um component Ajax muito poderoso que se encontra disponível no site http://docs.jquery.com/Plugins
O javascript jquery.js é a base dos outros componentes, sem ele não funciona, e para a tarefa específica de sobrescrever o alert utilizaremos o jqModal.js, também disponível no site e em anexo neste artigo.


Mãos a obra, vamos criar um javascript chamado dialog.js, e nele vamos utilizar os componentes disponíveis no jqModal para sobrescrever as funções de alert e também de confirm do javascript, o código desse js ficará assim:

function invocaDialog(){
    $('#alert').jqm({
        overlay: 60,
        overlayClass: 'overlay',
        modal: true,
        trigger: false
    });
    $('#confirm').jqm({
        overlay: 60,
        overlayClass: 'overlay',
        modal: true,
        trigger: false
    });
    confirm("Deseja ler o restante do arquivo?", "index.html");
    //alert("Alerta em JavaScript");
}
function alert(msg) {
  $('#alert')
    .jqmShow()
    .find('div.jqmAlertContent')
    .html("<span>" + msg + "</span>")
    .end()
    .find(':submit:visible')
    .click(function() {
        $('#alert').jqmHide();
    });
}
function confirm(msg,callback) {
  $('#confirm')
    .jqmShow()
    .find('p.jqmConfirmMsg')
    .html("<span>" + msg + "</span>")
    .end()
    .find(':submit:visible')
    .click(function(){
        if(this.value == 'Sim')
          (typeof callback == 'string') ?
            window.location.href = callback :
            callback;
        $('#confirm').jqmHide();
    });
}

As functions alert e confirm, são responsáveis por sobrescrever elas mesmas, repare que existe uma diferença apenas entre elas, a função confirm recebe um parâmetro a mais "callback", este parâmetro é a página que deverá ser redirecionada caso o usuário clique na opção "SIM" do confirm.

A função invocaDialog, será a função chamada para a exibição do alert ou confirm, essa função configura alguns parâmetros para a exibição personalizada, e ao final dela existem duas chamadas, essas chamadas com certeza vocês já conhecem, são as básicas para alert e confirm, basta passar qual você quer sobrescrever, eu coloquei as duas para mostrar, porém o confirm está comentado, pois não tem muita lógica chamar um alert e um confirm juntos, em alguns casos pode até ser útil.

Agora vamos para onde a mágica acontece, até aqui tudo muito simples, devemos agora somente personalizar nosso alert, e para isso configuramos o arquivo CSS chamado estilo.css, nele personalizamos todo o alert, para tal deve-se ter uma noção básica de CSS, o nome dos estilos ajudam na identificação do que será renderizado, então basta mudar para o padrão desejado.
Podemos inclusive incluir imagens para personalização, podemos fazer qualquer configuração suportada pelo CSS, um exemplo segue abaixo:

div.jqmAlert .jqmClose,
div.jqmConfirm .jqmClose {
  width:20px;
  height:20px;
  display:block;
  float:right;
  clear:right;
  background:transparent url(sair.gif) 0 0 no-repeat;
}

Como o nome já sugere, esse estilo é responsável por fechar o alert, nele incluí umagem de fundo, na linha:

background:transparent url(sair.gif) 0 0 no-repeat;

A imagem utilizada está nos anexos do arquivo.

Para finalizar o tutorial devemos chamar a nova função alert ou confirm a partir da página HTML ou JSP, então utilizamos as seguintes divs, que ficarão escondidas através da configuração no CSS, e só serão exibidas ao chamar a função.

        <!-- Alert Dialog -->

        <div class="jqmAlert" id="alert">
            <div class="jqmAlertWindow">
                <div class="jqmAlertTitle clearfix">
                    <a href="#" class="jqmClose"><em>Fechar</em></a>   
                    <h1>Alert Personalizado em JavaScript</h1>
                </div>
                <div class="jqmAlertContent"></div>
                <input type="submit" value="Ok" />

            </div>
        </div>
       
        <!-- Confirm Dialog -->
       
        <div class="jqmConfirm" id="confirm">
            <div class="jqmConfirmWindow">
                <div class="jqmConfirmTitle clearfix">
                    <a href="#" class="jqmClose"><em>Fechar</em></a>
                    <h1>Confirm Personalizado em JavaScript</h1>

                </div>
                <div class="jqmConfirmContent">
                    <p class="jqmConfirmMsg"></p>
                </div>
                <input type="submit" value="Não" />
                <input type="submit" value="Sim" />
            </div>
        </div>

Esse código pode ficar dentro das tags <body></body>
Para chamar a função eu coloquei um link sem caminho, que chama apenas a função invocaDialog(); como descrito abaixo:

<a href="#" onclick="invocaDialog()">Chamar Função</a>

Não podemos esquecer também de incluir os js e o css na página, para tal dentro das tags <head></head> incluímos o código:

<link href="estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqModal.js"></script>
<script type="text/javascript" src="dialog.js"></script>

Abaixo segue a imagem do meu alert personalizado



O código foi testado nos browsers Firefox e IE, em ambos funciona perfeitamente.
Espero que tenham gostado do tutorial e que seja útil, qualquer dúvida entrem em contato.

A - AKAHAI
L - LÔKAHI
O - OLU’OLU
H - HA’AHA’A
A - AHONUI

Luciano Bianchi

• estilo.css
• dialog.js
• jqModal.js
• jquery.js
• sair.gif

• http://docs.jquery.com/Plugins