Colocar un ModalPopup (C#)

por Christian Wenz

Descargar PDF

El control ModalPopup del Kit de herramientas de control de AJAX ofrece una manera sencilla de crear un elemento emergente modal mediante medios del lado cliente. Sin embargo, el control no ofrece una funcionalidad integrada para colocar el elemento emergente.

Información general

El control ModalPopup del Kit de herramientas de control de AJAX ofrece una manera sencilla de crear un elemento emergente modal mediante medios del lado cliente. Sin embargo, el control no ofrece una funcionalidad integrada para colocar el elemento emergente.

Pasos

Para activar la funcionalidad de ASP.NET AJAX y el Kit de herramientas de control, el control ScriptManager debe colocarse en cualquier parte de la página (pero dentro del elemento <form>):

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

A continuación, agregue un panel que funcione como elemento emergente modal. Se usa un botón para cerrar el elemento emergente:

<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>

Cada vez que se muestre el elemento emergente, se colocará en un lugar determinado de la página. Para esta tarea, se crea una función JavaScript del lado cliente. Primero intenta acceder al panel. Si lo logra, la posición del panel se establece mediante CSS y JavaScript (también cambiará la posición del elemento emergente). Sin embargo, el control ModalPopupExtender también intenta colocar el elemento emergente. Por lo tanto, el código JavaScript coloca repetidamente el elemento emergente, cada décima 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 puede ver, el valor devuelto por el método de JavaScript setTimeout() se guarda en una variable global. Esto permite detener el posicionamiento repetido del elemento emergente a petición, mediante el método clearTimeout():

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

Ahora todo lo que queda por hacer es que el explorador llame a estas funciones siempre que sea adecuado. Se debe llamar a la función de JavaScript movePanel() cuando se hace clic en el botón que desencadena el panel:

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

Y la función stopMoving() entra en juego cuando se cierra el elemento emergente; esta acción se puede desencadenar en el control ModalPopupExtender:

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

El elemento emergente modal aparece en la posición designada (haga clic para ver la imagen a tamaño completo).

AnteriorSiguiente