Twitter Facebook RSS Feed

«Alert» personalizado

miércoles, 09 de julio de 2008 a las 01:03hs por Gustavo Cantero (The Wolf)

Desarrollando una aplicación web para un cliente hicimos que todas las ventanas de la misma se mostraran con un ModalPopUp de la librería AJAX Control Toolkit de Microsoft, utilizando dentro de ésta el mismo diseño que para el resto del sitio, logrando así una imagen homogénea en toda la aplicación.  El primer inconveniente que tuvimos fue cuando nuestro cliente nos solicitó que TODOS los popup de la aplicación fueran iguales, incluidos los de los validadores, los cuales se muestran con un SummaryValidator en un «alert» de JavaScript.  Reemplazar esto fue sencillo, ya que simplemente creamos una función llamada «Alert» (nótese que se diferencia de la función original de JavaScript en que la primer letra está en mayúscula) que escribía el mensaje que se le pasara a través de un parámetro dentro del ModalPopUp, lo mostraba, y lo colocaba sobre el resto de los posibles ModalPopUp que hubiesen cambiando el zIndex de los layers, de la misma manera que lo mostramos en el artículo «Deshabilitar controles de la página hasta que finalicen los UpdatePanels».  Luego simplemente reemplazamos la llamada al alert con el siguiente código:

window.alert = Alert;

El código JavaScript quedaba como se muestra a continuación:

function Alert(msg) {
    $get('divAlertContent').innerText = msg;
    popUpShowed = $find('Alert');
    popUpShowed.show();
    popUpShowed._backgroundElement.style.zIndex += 10;
    popUpShowed._foregroundElement.style.zIndex += 10;
}

y en la página colocamos un código parecido al siguiente (al presentado aquí le quitamos el diseño para que quede más legible):

<asp:Button ID="btnAlert" runat="server" Style="display: none" />
<cc1:ModalPopupExtender ID="mpeAlert" runat="server" Enabled="True" PopupControlID="panAlert" DropShadow="true" TargetControlID="btnAlert" OkControlID="btnAcceptAlert" BehaviorID="Alert" />
<asp:Panel ID="panAlert" runat="server" HorizontalAlign="Center" Style="display: none" Width="370px" Height="100px">
    <div id="divAlertContent"></div>
    <br />
    <asp:Button ID="btnAcceptAlert" runat="server" Text="OK" />
</asp:Panel>

Esto daba como resultado que todos los «alerts» de la aplicación se mostraran en una ventana del mismo diseño.
El siguiente pedido que nos hizo el cliente fue que, al igual que los alerts «tradicionales», éstos pudieran cerrarse al pulsar la tecla ESC.   Para lograr esto modificamos la función anterior para que al mostrar el ModalPopUp guardara una referencia al mismo en una variable global llamada popUpShowed.  Luego agregamos una llamada a una función nuestra en el evento «pageLoad» del framework de AJAX, la cual chequea si el usuario pulsó la tecla ESC y, en caso de que popUpShowed no sea nula, cerramos el PopUp al que referencia.
A continuación muestro una página de ejemplo con todo el código para que mostrar la función “Alert” funcionando.

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head runat="server">
    <title>Página de ejemplo</title>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%C2%A0%C2%A0%C2%A0%20var%20popUpShowed%20%3D%20null%3B%0A%C2%A0%C2%A0%C2%A0%20function%20pageLoad()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20document.body.onkeypress%3DkeyPressHandler%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20window.alert%3DAlert%3B%0A%C2%A0%C2%A0%C2%A0%20%7D%0A%C2%A0%C2%A0%C2%A0%20function%20showPopUp(popUp)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20popUpShowed%20%3D%20%24find(popUp)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20popUpShowed.show()%3B%0A%C2%A0%C2%A0%C2%A0%20%7D%0A%C2%A0%C2%A0%C2%A0%20function%20Alert(msg)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%24get('divAlertContent').innerText%20%3D%20msg%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20popUpShowed%20%3D%20%24find('Alert')%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20popUpShowed.show()%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20popUpShowed._backgroundElement.style.zIndex%20%2B%3D%2010%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20popUpShowed._foregroundElement.style.zIndex%20%2B%3D%2010%3B%0A%C2%A0%C2%A0%C2%A0%20%7D%0A%C2%A0%C2%A0%C2%A0%20function%20keyPressHandler(e)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20if%20(popUpShowed%20!%3D%20null)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20var%20kC%C2%A0%20%3D%20(window.event)%20%3F%20event.keyCode%20%3A%20e.keyCode%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20var%20Esc%20%3D%20(window.event)%20%3F%2027%20%3A%20e.DOM_VK_ESCAPE%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20if(kC%3D%3DEsc)%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20popUpShowed.hide()%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20popUpShowed%20%3D%20null%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%7D%0A%C2%A0%C2%A0%C2%A0%20%7D%0A%C2%A0%C2%A0%C2%A0%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20.ModalBackground%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20background-color%3A%20Gray%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20filter%3A%20alpha(opacity%3D70)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20opacity%3A%200.7%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20.ModalPopup%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20background-color%3A%20%23eeeeee%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20border-width%3A%201px%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20border-style%3A%20solid%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20border-color%3A%20Gray%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20padding%3A%203px%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20font-size%3A%20small%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%7D%0A%C2%A0%C2%A0%C2%A0%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <input type="button" value="Ejemplo" onclick="alert('Ejemplo desde javascript')" />
    <asp:Button ID="btnAlert" runat="server" Style="display: none" />
    <cc1:ModalPopupExtender ID="mpeAlert" runat="server" Enabled="True" PopupControlID="panAlert"
        DropShadow="true" TargetControlID="btnAlert" OkControlID="btnAcceptAlert" BehaviorID="Alert"
        BackgroundCssClass="ModalBackground" OnOkScript="popUpShowed = null" />
    <asp:Panel ID="panAlert" runat="server" HorizontalAlign="Center" Style="display: none"
        Width="370px" Height="100px" CssClass="ModalPopup">
        <div id="divAlertContent">
        </div>
        <br />
        <asp:Button ID="btnAcceptAlert" runat="server" Text="OK" />
    </asp:Panel>
    </form>
</body>
</html>

Por último les dejo un proyecto hecho con Visual Studio 2008 con un ejemplo del «Alert»

Gustavo Cantero (The Wolf)
MCP – MCSD – MCTS

Categoria AJAX, ASP.NET | Etiquetas: ,

8 comentarios »

  1. Jorge dice:
    23 marzo 2009 a las 14:29

    Hola, muy buen ejercicio, me sirvio mucho, solo tengo una duda al mandar el alert cuadno entra un un pageload, no me funciona y me manda el alert tradicional. Alguna idea de por que??.

    Saludos

    Responder
  2. Gustavo Cantero (The Wolf) dice:
    23 marzo 2009 a las 16:24

    Puede ser que no te funcione porque aún no cargó la librería de AJAX. Si te parece ingresa la consulta en http://foro.scientia.com.ar con el fuente de lo que no te funciona y vemos de ayudarte.
    Saludos.

    Responder
  3. Guillermo dice:
    16 junio 2009 a las 16:35

    ¿Funciona igual para vs 2005 ?
    ¿No tendrás un ejemplo para vs 2005 ?

    Responder
  4. ALEJANDRO dice:
    4 octubre 2009 a las 19:25

    Super bueno, este post.
    Tenia un problema con el update panel.
    con este lo solucione

    Gracias,

    Responder
  5. Ocultar ModalPopup con tecla ESC dice:
    4 abril 2012 a las 19:03

    […] “Alert” personalizado No related posts. […]

    Responder
  6. Eduard Avendaño dice:
    5 mayo 2015 a las 18:12

    Solo funciona en 2 ocasiones, la tercera se bloquea el modal y no permite realizar ninguna acción. Revisé el proyecto y también. presenta ese comportamiento erróneo

    Responder

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.