“Alert” personalizadoMiércoles, 09 jul, 2008 @ 01:03 | Por Gustavo Cantero (The Wolf) | AJAX, ASP.NET  |
 |
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>
<script type="text/javascript">
var popUpShowed = null;
function pageLoad() {
document.body.onkeypress=keyPressHandler;
window.alert=Alert;
}
function showPopUp(popUp){
popUpShowed = $find(popUp);
popUpShowed.show();
}
function Alert(msg){
$get('divAlertContent').innerText = msg;
popUpShowed = $find('Alert');
popUpShowed.show();
popUpShowed._backgroundElement.style.zIndex += 10;
popUpShowed._foregroundElement.style.zIndex += 10;
}
function keyPressHandler(e){
if (popUpShowed != null){
var kC = (window.event) ? event.keyCode : e.keyCode;
var Esc = (window.event) ? 27 : e.DOM_VK_ESCAPE;
if(kC==Esc){
popUpShowed.hide();
popUpShowed = null;
}
}
}
</script>
<style>
.ModalBackground {
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
.ModalPopup {
background-color: #eeeeee;
border-width: 1px;
border-style: solid;
border-color: Gray;
padding: 3px;
font-size: small;
}
</style>
</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
Reciente
Lunes, 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
Lunes, 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.
Martes, 16 junio, 2009 a las 16:35
¿Funciona igual para vs 2005 ?
¿No tendrás un ejemplo para vs 2005 ?
Martes, 16 junio, 2009 a las 16:38
Debería funcionar, probá de crear un proyecto web en VS 2005 y copiar dentro todos los archivos de este proyecto.
Saludos.
Domingo, 04 octubre, 2009 a las 19:25
Super bueno, este post.
Tenia un problema con el update panel.
con este lo solucione
Gracias,
Lunes, 05 octubre, 2009 a las 09:58
Buenísimo! Me alegro!
Saludos!