http://docs.jquery.com/Downloading_jQuery#Download_jQuery]]{codigo}<">http://docs.jquery.com/Downloading_jQuery#Download_jQuery]]{codigo}<">
Mostrar mensagem de aguarde após clicar em botão com JQuery

Mostrar mensagem de aguarde após clicar em botão com JQuery

Adicione o JQuery em sua Página Após baixar na página oficial [[http://docs.jquery.com/Downloading_jQuery#Download_jQuery">http://docs.jquery.com/Downloading_jQuery#Download_jQuery]]

<script src="js/jquery-1.2.3.pack.js" type="text/javascript"></script>
Adicione o bloco de código abaixo na página.
 <script type="text/javascript"> $().ready(function () { $('#Button1').show(); $('[id$=Button1]').click(function () { $('#MsgAguarde').show(); }); }); </script>
{quebra} Adicione em sua página o código html que pode ser modificado a vontade. Este código será exibido quando o botão for clicado.
<span id="MsgAguarde" style="display:none; font-size:11px;">
<img src="img/loading.gif" alt="Aguarde.." /><br />
Aguarde...
</span>
Acima foi adicionado um gif animado circular chamado "loading.gif" e a palavra "Aguarde" Após o botão ser clicado tudo que estiver dentro do SPAN id=MsgAguarde será exibido. Adicione o botão que irá executar o processamento (adicione-o normalmente à página)
<input type="image" name="Button1" id="Button1" src="img/email-cadastrar.png" style="border-width:0px;" />
Caso queira fazer o botão ficar invisível, desaparecer, após ser clicado, coloque após
$('#PostBackMsg').show();
o código
$('#Button1').hide();
Lembre-se de trocar no bloco de código Javascript / JQuery o ID do SPAN que contém a mensagem de aguarde e o código do botão caso necessário.



Veja Também