Script para modificar la apariencia del mensaje de Alerta en la Web

// constantes para definir el título de la alerta y el texto del botón.

var ALERT_TITLE = "Oops!";

var ALERT_BUTTON_TEXT = "Ok";

// sobre el método de recorrido de alerta sólo si esta un nuevo navegador.

// navegador antiguos véase los standares de alertas

if(document.getElementById) {

window.alert = function(txt) {

createCustomAlert(txt);

}

}

function createCustomAlert(txt) {

// referencia al acceso directo del documento del objeto

d = document;

// si el objeto modalContainer ya existe en el DOM, retorna la libertad.

if(d.getElementById("modalContainer")) return;

// crear el div modalContainer como un hijo del elemento BODY

mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));

mObj.id = "modalContainer";

// asegurarse de que tan alto como tiene que ser la superposición con todo el contenido de la página

mObj.style.height = document.documentElement.scrollHeight + "px";

// crear el DIV que será la alerta 

alertObj = mObj.appendChild(d.createElement("div"));

alertObj.id = "alertBox";

// MSIE no intenta la posición: fija correctamente, así que esto compensa el posicionamiento de la alerta

if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";

// centro del cuadro de alerta

alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";

// crear un elemento H1 como la barra de título

h1 = alertObj.appendChild(d.createElement("h1"));

h1.appendChild(d.createTextNode(ALERT_TITLE));

// crear un elemento de párrafo que contiene el argumento txt

msg = alertObj.appendChild(d.createElement("p"));

msg.innerHTML = txt;

// crear un elemento de anclaje que se utiliza como botón de confirmación.

btn = alertObj.appendChild(d.createElement("a"));

btn.id = "closeBtn";

btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));

btn.href = "#";

// establecer el evento onclick para quitar la alerta cuando el ancla se hace clic.

btn.onclick = function() { removeCustomAlert();return false; }

}

// elimina la alerta personalizada del DOM.

function removeCustomAlert() {

document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));

}