MsgBox en una web...

Hace algún tiempo me encontré un problema en mi trabajo, necesitaba hacer un mensaje de confirmación en la aplicación web que estaba desarrollando. En mi trabajo voy desarrollando aplicaciones web con ASP .NET, aunque no había trabajado nunca con esta plataforma. Así que tiendo a hacer las cosas como si trabajase con cualquier tipo de lenguaje para web, es decir usando html, javascript y el paso de parámetros a través de las vistas, esto suele funcionar en todas partes.

Bien, sin más rodeos, empecé a trabajar para este proyecto con JQuery y utilizando algunos de los plugins que me parecen simplemente IMPRESIONANTES y me generé mi propia función MsgBox o como lo queráis llamar. Muchos de los programadores web que conozco tienen esto solucionado pero en su momento fue un gran problema para ellos al igual que para mi y supongo que aún habrá gente que tenga problema con ello. Así que una vez desarrollado pensé en compartirlo.

Es algo muy sencillo. Necesitamos la librería JQuery con el archivo jquery-min tendremos más que suficiente en este caso usaré el jquery-1.3.2.min.js. También utilizaré un plugin de jQuery de los que me han ahorrado mucho trabajo de lucha con las capas, el SimpleModal. De este plugin, decidí descargar el archivo jquery.simplemodal-1.3.js, aunque no hice ninguna valoración especial, quizá con el archivo jquery.simplemodal-1.3.min.js, habría más que suficiente y ocupa aproximadamente la mitad. Esta prueba os la dejo a vosotros, ja me contaréis...

Paso a explicar el código que he utilizado.
Para que esto funcione he creado 3 archivos.

• Aviso.html
• scripts.js
• prueba.aspx (en este caso)

En el archivo Aviso.html está creada la ventana emergente, popup o MsgBox que aparecerá cuando se realice la acción, el código es el siguiente:

<div id="fondo">
    <div id="msgbox">
        <table width="100%">
            <tr>
                <td id="titulo" colspan="3"><%=Request.Form("titulo")%></td>
            </tr>
            <tr>
                <td colspan="3">
                     
                </td>
            </tr>
            <tr>
                <td width="20%" align="center">
                <% If Request.Form("imagen") = "Exclamation" Then%>
                    <img src="Imagenes/Exclamation.png" alt="" />
                <% ElseIf Request.Form("imagen") = "Warning" Then%>
                    <img src="Imagenes/warning.png" alt="" />
                <% ElseIf Request.Form("imagen") = "Question" Then%>
                    <img src="Imagenes/Question.png" alt="" />
                <% ElseIf Request.Form("imagen") = "Allowed" Then%>
                    <img src="Imagenes/Allowed.png" alt="" />
                <% ElseIf Request.Form("imagen") = "notAllowed" Then%>
                    <img src="Imagenes/notAllowed.png" alt="" />
                <% Else%>
                     
                <% End If%>
                </td>
                <td colspan="2" width="*">
                   <p id="textoAviso"><%=Request.Form("texto")%></p> 
                </td>
            </tr>
            <tr>
                <% If Request.Form("botones") = "YesNo" Then%>
                    <td colspan="3" align="center"><a class="boton_azul" style="width:70px;" href="#" onclick="<%=request.form("funcion") %>"><span>Sí</span></a> <a class="boton_azul" style="width:70px;" href="#" onclick="javascript:quitaAviso();"><span>No</span></a></td>
                <% ElseIf Request.Form("botones") = "OkCancel" Then%>
                    <td colspan="3" align="center"><a class="boton_azul" style="width:70px;" href="#" onclick="<%= request.form("funcion") %>"><span>Aceptar</span></a> <a class="boton_azul" style="width:70px;" href="#" onclick="javascript:quitaAviso();"><span>Cancelar</span></a></td>
                <% ElseIf Request.Form("botones") = "OkOnly" Then%>   
                    <td colspan="3" align="center"><a class="boton_azul" style="width:70px;" href="#" onclick="<% if request.form("funcion")<>"" then%> <%=request.form("funcion")%>quitaAviso();<%else%>javascript:quitaAviso();<%end if%>" ><span>Aceptar</span></a></td>
                <% End If%>
            </tr>
        </table>
    </div>
</div>

Os explico lo que he querido hacer con esto. Lo más importante no es el código en si mismo, sino el paso de parámetros. Como podéis observar paso como parámetros el título, la imagen, los botones y la función. El título como su nombre indica pondrá el título en la ventana de confirmación. La imagen, indicará el icono que se quiere mostrar en la ventana. en este caso hay programadas y imágenes (Exclamation, Warning, Question, Allowed, notAllowed), para cada una de ellas debe existir una imagen para que aparezca ahí mostrada. Como se ve en el código, las imágenes están en el directorio Imagenes y son todas .png, claro cada uno podéis poner las imágenes que queráis.

Los botones están creados con imágenes y dependiendo de la opción elegida, (YesNo, OkCancel, OkOnly), mostrará  los diferentes botones, como se ve a continuación.

Opción YesNo

Opción OkCancel

Opción OkOnly

Como os comentaba antes cada uno puede crear opciones nuevas y si hay alguna interesante que no he contemplado, me la podéis decir y la añadiré al código.

Y por último queda la función. En este parámetro pondremos la función javascript que debe ejecutarse cuando pulsemos el botón de Aceptar o el de Sí. Cuando por el contrario se pulse el botón No, Cancelar o cuando en la opción OkOnly no se le indique función, se ejecutará la función quitaAviso(); que quitará el MsgBox de la pantalla.

Estas funciones estarán en el scripts.js. La más importante de ellas y muy sencilla de implementar será la función que ejecuta nuestra ventana emergente, la función la he llamado MsgBox.

function MsgBox(titulo, texto, imagen, botones, funcion){
     parametros = "titulo=" + titulo + "&texto=" + texto + "&imagen=" + imagen + "&botones=" + botones + "&funcion=" + funcion;
     $.ajax({
            cache: false,
            url: 'aviso.html', 
            dataType: "html",
            type: "post",
            data: parametros,
            success: function(resp){
                $("body").append(resp);
                $("#msgbox").css("left",(document.body.clientWidth/2) - 150);
                $("#msgbox").css("top",(document.body.clientHeight/2) - 75);
                $("#fondo").modal();
            },
            error: function(resp) {
                alert(resp);
            }
        });
   }

function quitaAviso(){
        $.modal.close();
        var quita = document.getElementById("fondo");
        var padre = quita.parentNode;
        padre.removeChild(quita);
   }

Como comenté anteriormente, se utiliza jQuery así que utilizando sus llamadas Ajax, llamo a la página aviso.html, pasándole por POST los parámetros que he comentado antes y con la respuesta, la añado al body de la página, la centro y utilizando SimpleModal la pongo por encima de todo lo visible. También presento la función quitaAviso(); que ya os he comentado cual es su función.

Y ahora hay que hacer una página que llame a nuestro MsgBox.

<html>
<head>
    <title>Prueba MsgBox</title>
    <script src="javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="javascript/jquery.simplemodal-1.3.js" type="text/javascript"></script>
    <script src="javascript/scripts.js" type="text/javascript"></script>
</head>
<body>
   <input type="button" value="Saca el mensaje" onclick="javascript:MsgBox('Titulo','¿Está seguro de querer hacer esto?','Warning','YesNo','');" />
</body>
</html>

Esta página llamada prueba.html simplemente tiene un botón que al ser pulsado ejecuta nuestra función MsgBox. Como opciones tenemos que el título será 'Titulo', el texto que aparecerá en la ventana será '¿Está seguro de querer hacer esto?', la imagen será 'Warning', los botones 'YesNo' y no le hemos puesto ninguna función porque para una prueba no lo he visto necesario.

El resultado final será:

Os pongo aquí una llamada a la función MsgBox con una función añadida, como ejemplo.

MsgBox("Salida de camiones","¿ Seguro de dar salida a " + loteCamion + " con peso " + peso + " ?","Question","YesNo","javascript:lanzaCamion('"+loteCamion+"','"+peso+"','"+accion+"');");

Con esta llamada, si en la ventana hay una respuesta positiva, es decir se pulsa el Sí, se ejecutará la función lanzaCamion con sus 3 parámetros.

Espero que os sirva.