terça-feira, 19 de janeiro de 2010

AJAX: Criar um loading modal usando UpdateProgress e ModalPopup com controloes ASP.net AJAX

Solução copiada:
Pra quem estiver precisando criar um updateprogress dentro de uma popup modal, só ver esse exemplo que
tira de letra =P Clica aqui oh

Solução feita por mim (que particularmente acho melhor)
bom é simples.. é só por esse css:
body{
height:100%;
}
.updateModal {
position: absolute;
top: -22px;
left: -142px;
right: 0px;/* IE não le isso */
bottom: -22px;/* IE não le isso */
padding:0px;
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
overflow: auto;
/* Para o IE */
height: expression(document.body.clientHeight + "px");
width: expression(document.body.clientWidth + "px");
}

.updateModalBox
{
padding: 4px;
background-color: #D8D8D8;
border: 1px solid #B2B2B2;
position: absolute;
left: 50%;
top: 50%;
margin-top: -35px;
margin-left: -100px;
height: 70px;
padding-top: 20px;
width: 200px;
}

E o updateprogress do asp.net ajax vc deixa assim oh:

<updateprogress id="UpdateProgress1" runat="server"></updateprogress>


<progresstemplate>

<div class="updateModal">


<div align="center" class="updateModalBox">

<img  src="js/loading.gif" alt="" /> Carregando...
Por favor aguarde

</div>
</div>

</progresstemplate>


ai a imagem de loading vc procura né... n seja preguiçoso..
ah se alguem tiver algum ideia de como melhorar só da um toque, eu testei no IE 6, IE7, IE8 e FF3...

7 comentários:

  1. Bacana cara, simples e objetivo! Valeu pela dica.

    ResponderExcluir
  2. Muito bom , Finalmente algo simples e funcional.

    ResponderExcluir
  3. Muito bom, simples e que funciona.

    Valeu

    Ricardo

    ResponderExcluir
  4. Amigo,

    A linha, Sys.WebForms ... do javascript não funciona, acontece o erro 'Sys' is undefined. Estou utilizando aplicação web.

    ResponderExcluir
  5. Parabéns, muito bom, mas só uma sugestão para corrigir um erro que estava acontecendo.
    Descrição do erro: ao fazer a requisição na "updateModal" no chrome, as propriedade do css ("padding:0px;", "background-color:Gray;" e "filter:alpha(opacity=70);") que deixa a tela opaca, não estava persistindo em toda tela, era possível testar isso ao rola o scroll da barra de rolagem.

    Solução: no css "updateModal" troque a posição "position: absolute; " para "position: fixed;".

    ResponderExcluir