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.