Volvemos con Java Script, para mostraros cómo personalizar todos los alerts de una página web de forma fácil.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function alertDGC(mensaje) { var dgcTiempo=500 var ventanaCS='<div class="dgcAlert"><div class="dgcVentana"><div class="dgcCerrar"></div><div class="dgcMensaje">'+mensaje+'<br><div class="dgcAceptar">Aceptar</div></div></div></div>'; $('body').append(ventanaCS); var alVentana=$('.dgcVentana').height(); var alNav=$(window).height(); var supNav=$(window).scrollTop(); $('.dgcAlert').css('height',$(document).height()); $('.dgcVentana').css('top',((alNav-alVentana)/2+supNav-100)+'px'); $('.dgcAlert').css('display','block'); $('.dgcAlert').animate({opacity:1},dgcTiempo); $('.dgcCerrar,.dgcAceptar').click(function(e) { $('.dgcAlert').animate({opacity:0},dgcTiempo); setTimeout("$('.dgcAlert').remove()",dgcTiempo); }); } window.alert = function (message) { alertDGC(message); }; |
Finalmente, se puede personalizar su aspecto con las siguientes líneas de CSS.
|
1 2 3 4 5 |
.dgcAlert {top: 0;position: absolute;width: 100%;display: block;height: 1000px; background: url(http://www.dgcmedia.es/recursosExternos/fondoAlert.png) repeat; text-align:center; opacity:0; display:none; z-index:999999999999999;} .dgcAlert .dgcVentana{width: 500px; background: white;min-height: 150px;position: relative;margin: 0 auto;color: black;padding: 10px;border-radius: 10px;} .dgcAlert .dgcVentana .dgcCerrar {height: 25px;width: 25px;float: right; cursor:pointer; background: url(http://www.dgcmedia.es/recursosExternos/cerrarAlert.jpg) no-repeat center center;} .dgcAlert .dgcVentana .dgcMensaje { margin: 0 auto; padding-top: 45px; text-align: center; width: 400px;font-size: 20px;} .dgcAlert .dgcVentana .dgcAceptar{background:#09C; bottom:20px; display: inline-block; font-size: 12px; font-weight: bold; height: 24px; line-height: 24px; padding-left: 5px; padding-right: 5px;text-align: center; text-transform: uppercase; width: 75px;cursor: pointer; color:#FFF; margin-top:50px;} |
Como podéis ver, extremadamente fácil y rápido. Ahora, al utilizar la función alert(“Hola”) de Java Script, tendréis un mensaje personalizado. Pero ¡ojo!, este alert no detiene la ejecución del código (algo que sí hace el alert original)
Podéis probarlo rellenando de forma incorrecta el formulario de contacto del sidebar derecho.

¿Que recorrido quiero dar a mi proyecto? Hay soluciones “low cost” muy válidas para proyectos que se vayan a regir sobre un estándar establecido. Es decir, si quieres montar una tienda on-line que haga todo lo que hacen el resto de comercios electrónicos, con las mismas formas de pago, similar estructura, productos sencillos y un volumen de carga razonable, probablemente soluciones de e-commerce gratuitas como Prestashop o Magento puedan servirte. Si tienes un pequeño negocio y lo que quieres es poner tu página web en la tarjeta, un 1and1 de turno o una plantilla de WordPress serán suficientes. El problema es cuando se pretende captar clientes para un negocio o depender de una tienda on-line, en la que además se tienen puestas grandes espectativas de crecimiento. Es ahí cuando una solución “estándar” puede salir cara.