Bueno, hoy vamos a ver como podemos sobrescribir, el ‘horrible’ alert de javascript por uno más ‘moderno’, o por lo menos poder aplicarle estilos.
Para ello reaprovecharemos la función del último post:
function $(objID){
return document.getElementById(objID);
}
Creamos entonces la clase que va a sustituir la que tiene por defecto JavaScript,
function MyAlert( sAlert ) {
var alt;
if ((this.NS4) || (this.NS6)) {//[ Netscape ]//
alt = window.pageYOffset;
} else {
alt = document.documentElement.scrollTop;
}
resizeMessage();
myAlert = $("myAlert");
if(!myAlert){
var myAlert = document.createElement("div");
myAlert.id = 'myAlert';
document.body.appendChild(myAlert);
var inMyAlert = document.createElement("div");
inMyAlert.className = 'myAlert';
myAlert.appendChild(inMyAlert);
var myAlertText = document.createElement("div");
myAlertText.id = 'myAlertText';
inMyAlert.appendChild(myAlertText);
var closeAlert = document.createElement("div");
closeAlert.className = 'closeAlert';
closeAlert.onclick = function(){closeMessage();}
inMyAlert.appendChild(closeAlert);
}
$("myAlertText").innerHTML = sAlert;
myAlert.style.display = "block";
myAlert.style.marginTop = alt+"px";
myAlert.style.display = 'block';
}
y luego claro está le decimos a la página que a partir de ahora esta será la función alert por defecto.
window.alert = MyAlert;
Creamos un botón para cerrar el alert:
function closeMessage(){
$("message").style.display = 'none';
$("myAlert").style.display = 'none';
}
Hasta aquí ya lo tenemos pero debemos tener cuidado con la capa gris transparente del fondo hay que hacer que ocupe el máximo de la página, para ello tenemos la siguiente función.
function resizeMessage(){
var body = document.getElementsByTagName("body")[0];
var message = $('message')
if(!message){
var message = document.createElement("div");
message.className = 'message';
message.id = 'message';
document.body.appendChild(message);
}
message.style.display = 'block';
var isIE = '\v' == 'v';
if (isIE){
var body = document.getElementsByTagName("body")[0];
message.style.height = body.offsetHeight-4+"px";
message.style.width = body.offsetWidth-20+"px";
} else {
message.style.height = window.offsetHeight+"px";
message.style.width = window.offsetWidth+"px";
}
}
Incluimos en la cabecera algún CSS para hacerlo bonito
y para llamar a la función.
Si queréis descargaros el código podéis hacerlo desde aqui.
gracias por el aporte, no sabía que podía sobreescribir la función “alert”, por cierto, pienso que sería mejor si encapsularas tus funciones en una sola clase.
saludos
La verdad, yo tampoco lo sabia, pero lo probé y funcionó así que ….
Cierto a ver si el proximo post va de Programación orientada a objetos.
creo que es muy bueno pero deberias montar un ejemplo para lo que apenas estan aprendiendo …digo no
A ver si tengo un ratito e intento hacer una especie de librería, para que sea sencillo de utilizar
No todo lo que reluse es oro. La libreria funciona bien y esta buena pero tiene un problema que para lo que yo queria usarla no me sirve asi al menos. El alert original aceptaba caracteres de formateo de parrafo por ejemplo \n nos permite saltar a la siguiente linea. Este nuevo alert no lo permite. A alguien se le ocurre como solucionarlo? Yo no encontre la forma.
Supongo que le puedes aplicar una función que te cambie los saltos de linea, por br, si no sabes como aqui tienes un ejemplo….
function nl2br(text){text=escape(text);
return unescape(text.replace(/(%5Cr%5Cn)|(%5Cn%5Cr)|%5Cr|%5Cn/g,‘
’));
}
La función es solo un ejemplo de como se puede hacer, sin embargo no pretende ser una librería para poder usarla como tal ….
Saludos
bueno, yo queria saber como puedo hacer para poder mostrar varios alert de manera simultanea, no uno detras de otro como se hace normalmente, si no que si colocas 10 alerts, que los diez se muestren de una sola vez.
Ya se que este hilo es de principios de 2009, pero tengo un problemilla con el alert de javascript y pense que desde aquí me podríais ayudar.
tengo colocado un alert en un select dentro de un formulario, de tal manera que si por ejemplo ese select despues de tabular(onBlur) queda vacio, muestra un alert. Hasta ahí bien, el problema es que después de tabular el cursor va al siguiente select, que también tiene otro onBlur, de tal manera que si se vuelve al primer select, te vuelve a salir otro alert…
Mi pregunta es si despues de hacer un alert, puedo hacer una “redirección del curso” hacia donde quiera??
Buenas julliop,
creo que al llamar al alert en el evento onblur de cada uno de los selects, en lugar de llamar a la función alert de javascript directamente llama a una función tuya donde hagas una validación de si tiene o no que mostrarse el nuevo alert.
Por ejemplo te creas una variable que te avise si tienes no el alert.
De todas maneras no sé para que necesitas mostrar un alert en el evento onBlur, yo lo más normal que he visto es ponerlo en el onChange, y entonces no tienes ningún tipo de problemas.
Espero que te sirva! Un Saludo!
muchas gracias por responder, te comento.
Es en una pagina de registro y lo que hago es que cuando se abandona el select, llamo a una función que comprueba si está vacio(o si se repite o si tiene más de x digitos…) de tal manera que si salta el alert, me pasa al siguiente select, que es lo que a mi me interesaba cambiar, te pongo un ejemplo del codigo:
function verificarentrada(control)
{
if (control==”)
alert(‘Debe introducir sus datos personales’);
var tam=control.length;
if (tam>30)
{
alert(‘Debe simplificar sus datos personales’);
}
}
Registro
Nombre:
Apellidos:
muchas gracias, si prefieres contestar por email para no cambiar el tema del hilo…
**
++
++Nombre:
++
++Apellidos:
++
++
++
++
++
este es el codigo que se “comio”
Puedo yo darle estilo al mensaje del ALERT solo con style ?
por ejemplo :
#box { font-style: strong
}
var age;
age = prompt(“Type age : “, “”);
if (edad<18) {
} else { alert(“You are Welcome, surf it it”);
}
http://www.aptocomparto.com
busca habitaciones y renta en medellin
#box { font-style: strong
}
var age;
age = prompt(“Type age : “, “”);
if (edad<18) {
} else { alert(“You are Welcome, surf it it”);
}
no me ingresa todo el codigo, q mal