Mi Lindo Champoton

Alerts, Confirm y Popups

Hoy quiero presentarles unas herramientas que desarrolle en JavaScript que muestran una Alerta y un popup, para usarse en nuestros sitios web.

1. Alertas

Las alertas como sabrán se usan para mostrar mensajes a los usuarios.

En este paquete van incluidas las alertas en modo Información,Warning y Error.

Para hacer funcionar estas alertas basta con invocar la función Alerta() que construye la alerta esta función recibe 3 parámetros los 2 primeros obligatorios y el ultimo opcional.
new Alerta('El mensaje a mostrar','info',function(){
//Hacer algo aquí
});


El primer parámetro es el mensaje que queremos mostrar en la alerta, el segundo se refiere al tipo de Alerta como había dicho anteriormente se manejan 3 Información,Warning,Error, esto dependiendo de como queramos mostrar el mensaje. El ultimo parámetro de tipo Function() es opcional y sirve para ejecutar una función o código al momento de dar click en el botón aceptar de la alerta, por si queremos ejecutar algún código después de cerrar la alerta este parámetro nos viene como anillo al dedo.

2.- Confirmación

Los confirm como sabrán sirven para preguntar al usuario si en verdad quiere ejecutar una acción, como por ejemplo pedir la confirmación para eliminar un registro.

En este paquete viene incluida una simulación del confirm.

Para hacer funcionar este confirm basta con invocar la funcion Confirmacion() que construye el confirm, esta funcion recibe 3 parametros el primero obligatorio y los demas opcionales.

new Confirmacion('¿Deseas mostrar un mensaje?',
function () {
return new Alerta('Acaptaste mostrar este mensaje', 'info');
},
function(){
//Hacer algo aqui
}
);


El primer parámetro es el mensaje o pregunta que queremos hacerle al usuario, para que nos confirme. El segundo parámetro es de tipo Function() y es la función o el código que queremos ejecutar si el usuario da click en Aceptar y nos confirma la pregunta. El ultimo parámetro también de tipo Function() y es opcional y sirve para ejecutar una función o código si el usuario da click en Cancelar.

3.- Popups

Los popups como sabemos son ventanitas emergentes o modales para mostrar una pagina dentro de otra, al igual sirven para mostrar cierta parte una pagina por la razon de que no nos alcanza el espacio o porque queremos resaltar esa parte para que el visitante la vea, pero mayormente se usa para mostrar anuncios.

En este paquete viene incluida una simulación de un popup que muestra una pagina(No soy muy partidario de los anuncios, este lo use para una aplicación Web Empresarial para mostrar ventanas de captura).

Para hacer funcionar este popup basta con invocar la función AutoPopup() que construye el popup, esta función recibe 4 parámetros las 3 primeras obligatorias y la ultima opcional.


new AutoPopup('popup.htm', 'Titulo Popup', 300, 300, '');


El primer parámetro es para indicar el nombre y ruta de la pagina que queremos mostrar en el popup. El segundo parámetro es para indicarle un titulo a nuestro Popup. El tercer parámetro es para indicar el ancho en pixeles que tendrá nuestro popup(ancho de la ventana), el tercer parámetro es para indicar el alto en pixeles que tendrá nuestro popup(alto de la ventana). El ultimo parametro es para indicar parametros para la pagina que queremos mostrar, estas deben ir en el formato

parametro1=hola&parametro2=mundo

.

Espero estas herramientas les ayuden en sus futuros proyectos o les sirva como modelo para mejorar estas herramientas. Recalco si quieren modificar el código fuente, las imágenes, el css, etc. pueden hacerlo con la condición de que publiquen las mejoras que han realizado, para que quienes necesiten de estas herramientas usen lo mejor.

En el siguiente enlace de abajo podrán descargar el archivo .js, el archivo .css y las imagenes que se usaron en la creacion de estas utilidades, así como un demo para que verifiquen su funcionamiento.

Cualquier duda o sugerencia no duden en preguntar, que por aqui andaremos.

Saludos a todos. Nos vemos en el proximo blog.

Descargar codigo fuente