Olá pessoal! A partir deste publicarei uma série de artigos que tratam de construir uma interface elaborada utilizando o jQuery com o ASP.NET. Iremos utilizar conceitos já descritos no artigo "Ajax Loader com Bloqueio de Tela" além de acrescentar alguns novos.
Para acompanhar estes tutoriais, por favor baixe o site de exemplo disponibilizado na Página de Suporte com o título deste artigo, pois os posts serão todos baseados nele.

Neste primeiro artigo iremos corrigir alguns "bugs" de apresentação da página quando utilizamos o plugin jqModal associado com o componente UpdatePanel do ASP.NET Ajax.

No site exemplo, na página Default.aspx temos dentro da tag <form> um div que tem a largura de 770 pontos (a área útil do navegador em resolução 800x600) que contém campos de pesquisa, botões de filtro e um gridview. Estes componentes estão dentro de um UpdatePanel.
Em outro UpdatePanel, tem um div modal (está com a classe css jqmWindow, que define janelas modais para o jQuery) que tem os campos para edição de cada registro do grid.
Além disso, temos o nosso AjaxLoader dentro do UpdateProgress e algumas rotinas de JavaScript.

Problema 1: O div de detalhes não aparece :-(

Caso você construa uma página em que um registro é editado em uma janela modal ao invés de uma página aspx específica, dependendo da construção os componentes internos da janela modal não aparecem.

Observe o design do div dos detalhes do nosso exemplo: 

	<div id="dvDetalhes" class="jqmWindow">
		<div>
			<asp:UpdatePanel runat="server" ID="UpdatePanel2">
				<ContentTemplate>
					<div class="titulos">
						<span>Detalhes do Registro</span>
					</div>
					<span>Código</span><br />
					<asp:TextBox runat="server" ID="tbxCodigo" CssClass="somenteleitura" ReadOnly="true"></asp:TextBox><br />
					<span>Nome</span><br />
					<asp:TextBox runat="server" ID="tbxNome" CssClass="textboxes">asp:TextBox><br />
					<span>Data de Cadastro</span><br />
					<asp:TextBox runat="server" ID="tbxDataCadastro" CssClass="somenteleitura" ReadOnly="true"></asp:TextBox><br />
					<div style="width: 100%; text-align: center;">
						<asp:Button runat="server" ID="btnCancelar" Text="Cancelar" OnClick="btnCancelar_Click" />
						<asp:Button runat="server" ID="btnSalvar" Text="Salvar" OnClick="btnSalvar_Click" />
					</div>
				</ContentTemplate>
			</asp:UpdatePanel>
		</div>
	</div>

Note que o UpdatePanel se encontra dentro do div dvDetalhes. Se fosse o inverso, ou seja, o div dvDetalhes estivesse dentro do ContentTemplate do UpdatePanel2, os componentes da janela modal não apareceriam. Portanto, ao construir uma janela modal que utilize componentes AJAX, coloque o UpdatePanel dentro do div que representa a janela modal :-)

Problema 2: Os botões das janelas modais não enviam postback :-(

Você já consegue mostrar o conteúdo da janela modal na página .aspx, mas clica no botão para salvar, por exemplo, e não acontece nada. Isto é ocasionado por causa do funcionamento do plugin jqModal durante o acionamento das janelas modais: Quando a janela modal é invocada pelo método jqmShow(), a biblioteca muda o "pai" do div (e consequentemente todo o conteúdo dentro deste) com a classe jqmWindow para a tag <body>, porém, para que algum botão possa gerar postbacks, o mesmo deve estar dentro da tag <.form>.
Veja no nosso exemplo que praticamente todo o conteúdo da página (=componentes que serão exibidos na tela) está dentro da tag <form>.
Para resolver este problema, precisamos alterar a seguinte linha do arquivo jqModal.js (o próprio plugin jqModal - a linha 44, no caso do js que eu tenho aqui e que é usado no exemplo): 

	//Devemos alterar a seguinte linha:
	h.o=(o)?o.addClass(c.overlayClass).prependTo('body'):false;

	//para o seguinte código:
	h.o=(o)?o.addClass(c.overlayClass).prependTo('form'):false;

Com essa pequena alteração, resolvemos o problema do postback :-)

Problema 3: Fiz aquele lance do bloqueio da janela em AJAX, mas quando utilizo janelas modais não consigo digitar nas caixas de texto (textboxes) :-(

Caso você tenha seguido a dica de como bloquear o conteúdo da página quando um postback assíncrono é executado e usou outras janelas modais porém não consegue entrar com texto nos textboxes, porém consegue clicar nos elementos (botões, checkboxes, combos), vai a dica: feche o div modal do AjaxLoader ANTES de abrir a janela modal que sofrerá edição! Veja exemplo: 

	protected void btnInserir_Click(object sender, EventArgs e)
	{ 
		...
		//Faz aparecer a janela Modal
		ScriptManager.RegisterStartupScript(this, this.GetType(), "abremodal", "$dvModalLoader.jqmHide();$dvDetalhes.jqmShow();", true);
	}

No nosso caso, a variável javascript $dvModalLoader é o div que é exibido quando o ajax é invocado. Quando a requisição termina, ele deveria desaparecer, o que não acaba ocorrendo. Neste trecho de código, foi forçado o fechamento do mesmo antes de exibir outro div modal. Assim, mais um problema resolvido :-)

Veja um vídeo demonstrando estes problemas:
PS: Como o vídeo completo estourou o limite do YouTube (10 min), dividi-o em duas partes:

Parte 1:

Parte 2:

Com isso, resolvemos alguns dos problemas que podem ocorrer quando utilizamos o jQuery + jqModal com o ASP.NET habilitado para AJAX!

Abraços a todos :-)