Posicionamento de um ModalPopup (C#)

por Christian Wenz

Baixar PDF

O controle ModalPopup no Kit de Ferramentas de Controle AJAX oferece uma maneira simples de criar um pop-up modal usando meios do lado do cliente. No entanto, o controle não oferece uma funcionalidade interna para posicionar o pop-up.

Visão geral

O controle ModalPopup no Kit de Ferramentas de Controle AJAX oferece uma maneira simples de criar um pop-up modal usando meios do lado do cliente. No entanto, o controle não oferece uma funcionalidade interna para posicionar o pop-up.

Etapas

Para ativar a funcionalidade de ASP.NET AJAX e o Kit de Ferramentas de Controle, o ScriptManager. O controle deve ser colocado em qualquer lugar na página (mas dentro do <form> elemento ):

<asp:ScriptManager ID="asm" runat="server" />

Em seguida, adicione um painel que serve como o pop-up modal. Um botão é usado para fechar o pop-up:

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 <asp:Button ID="OKButton" runat="server" Text="Close" />
</asp:Panel>

Sempre que o pop-up for mostrado, ele deverá ser posicionado em um determinado lugar na página. Para essa tarefa, uma função JavaScript do lado do cliente é criada. Primeiro, ele tenta acessar o painel. Se for bem-sucedido, a posição do painel será definida usando CSS e JavaScript (altere a posição do pop-up à vontade). No entanto, o ModalPopupExtender controle também tenta posicionar o pop-up. Portanto, o código JavaScript posiciona repetidamente o pop-up, a cada décimo de segundo.

<script type="text/javascript">
 var id = null;
 function movePanel() 
 {
 var pnl = $get("ModalPanel");
 if (pnl != null) 
 {
 pnl.style.left = "50px";
 pnl.style.top = "50px";
 id = setTimeout("movePanel();", 100);
 }
 }

Como você pode ver, o valor retornado do setTimeout() método JavaScript é salvo em uma variável global. Isso permite interromper o posicionamento repetido do pop-up sob demanda, usando o clearTimeout() método :

function stopMoving() 
 {
 clearTimeout(id);
 }
</script>

Agora, tudo o que resta fazer é fazer com que o navegador chame essas funções sempre que apropriado. A movePanel() função JavaScript deve ser chamada quando o botão é clicado que dispara o painel:

<div>
 <asp:Button ID="btn1" runat="server" Text="Launch Modal Popup" 
 OnClientClick="movePanel();" />
</div>

E a stopMoving() função entra em jogo quando o pop-up é fechado, isso pode ser disparado no ModalPopupExtender controle :

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server"
 TargetControlId="btn1" PopupControlID="ModalPanel" OkControlID="OKButton"
 OnOkScript="stopMoving();" />

O pop-up modal aparece na posição designada (Clique para exibir a imagem em tamanho real)

AnteriorAvançar