ModalPopup

Descripción

El ModalPopup es otro ejemplo de potente funcionalidad en muy pocas líneas de código. Con éste, conseguimos el efecto de mostrar contenido deshabilitando la interacción con el resto de la página. Podemos emular el efecto del famoso “window.open(...)” de javascript sin necesidad de salir de la página en que estamos ni de abrir una nueva ventana del navegador.

Imaginemos que el usuario presiona el botón “Dime tu nombre y apellidos”, de repente la página se oscurece y aparece en el centro un cuadro donde se pide el nombre y los apellidos... todo ello sin salir de la página en que estamos y sin poder hacer nada con el resto de elementos de ésta. Así pues, el usuario puede elegir entre cancelar -para volver donde estaba antes- y rellenar sus datos y presionar OK, activando una llamada a una función javascript que hayamos definido.

Distinguiremos entre el activador, que en nuestro ejemplo es el botón “Dime tu nombre y apellidos”, y el popup, que en nuestro ejemplo se corresponde con el panel que nos mostrará el formulario de entrada de datos del usuario.

Propiedades

• TargetControlID: ID del control activador. Típicamente será un Button o un LinkButton.
• PopupControlID: ID del control popup. Típicamente será un Panel.
• BackgroundCssClass: clase CSS que se aplicará al fondo de pantalla, por ejemplo para dar un efecto de oscuridad a los elementos sobre los que no vamos a poder interactuar.
• DropShadow: le daremos el valor de true si queremos que se añada un efecto de sombra a nuestro control popup.
• OkControlID: el ID del elemento que produce el efecto de OK de nuestro popup.
• OnOkScript: nombre del script que se activará cuando presionemos sobre OK.
• OkCancelID - The ID of the element that cancels the modal popup
• OmCancelScript - Script to run when the modal popup is dismissed with the CancelControlID

Ejemplo

En nuestro ejemplo, el activador será un Button que mostrará una ventana emergente (popup). Desde ésta actuaremos de forma diferente si presionamos sobre OK o sobre Cancel. En nuestro ejemplo hemos presionado OK

<asp:Button ID="Button1" runat="server" Text="Abrir ventana emergente" />

<asp:Panel ID="Panel1" runat="server" Width="125px" BackColor="yellow">
Ventana emergente debida a la llamada del botón
<br />
<asp:Button ID="Button2" runat="server" Text="OK" />
<asp:Button ID="Button3" runat="server" Text="Cancel" />
</asp:Panel>

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
CancelControlID="Button3"
OkControlID="Button2"
OnCancelScript="Cancel()"
OnOkScript="OK()"
PopupControlID="Panel1"
TargetControlID="Button1">
</ajaxToolkit:ModalPopupExtender>

<script type="text/javascript">
function OK()
{
alert('Has apretado OK');
}

function Cancel()
{
alert('Has apretado Cancel');
}
</script>