Personalizar los alert en Java Script

Volvemos con Java Script, para mostraros cómo personalizar todos los alerts de una página web de forma fácil.

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);
};

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.

.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;}

.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.

Rating: 3.8/5 (30 votes cast)

Rating: +1 (from 15 votes)

Personalizar los alert en Java Script, 3.8 out of 5 based on 30 ratings