Jolie alerte avec "alert()"

Soyez le premier à donner votre avis sur cette source.

Vue 10 521 fois - Téléchargée 1 761 fois

Description

Voici une ré-implémentation de la fonction alert() de javascript, en plus jolie et personnalisable soit en CSS, soit a travers le code JavaScript.

Source / Exemple :


// La toute première chose est de modifier la fonction alert. Ainsi, on appelera non plus la methode du navigateur mais une fonction personnalisée
window.alert = function(text, aname)
{
	// Creation de la boite
	var div = document.createElement("div");
	var box = document.body.appendChild(div);
	box.setAttribute("class", "alertBox");
	box.style.display = "none";	
	
	// Creation titre
	var span = document.createElement("span");
	var title = box.appendChild(span);
	title.setAttribute("class", "alertTitle");
	
	// Bouton fermant
	var img = document.createElement("img");
	var close = box.appendChild(img);
	close.src = "dialog-close.png";
	close.width = 26;
	close.onclick = function()
	{
		document.body.removeChild(box);
	}
	
	// Creation du contenu
	span = document.createElement("span");
	var content = box.appendChild(span);
	content.setAttribute("class", "alertContent");
	
	// Insertion contenus
	if(typeof(aname) == "undefined")
		aname = "Alert window"
	title.innerHTML = aname;
	content.innerHTML = text;

	// Definition des style

	var width = 360; // largeur
	var height = [160, 480]; // hauteur [min, max]

	box.style.position = "absolute";
	box.style.zIndex = 9998;
	box.style.overflox = "hidden";
	box.style.left = "50%";
	box.style.top = "50%";
	box.style.width = width + "px";
	box.style.minHeight = height[0] + "px";
	box.style.maxHeight = height[1] + "px";
	box.style.marginLeft = -(width / 2) + "px";
	box.style.marginTop = -(box.offsetHeight / 2) + "px";
	box.style.border = "1px #000000 solid";
	box.style.backgroundColor = "#AFD4DB";
	box.style.fontFamily = "sans-serif";
	// CSS3
	box.style.borderTopRadius = "15px";
	box.style.borderBottomRadius = "5px";
	box.style.MozBorderRadius = "10px";
	box.style.boxShadow = "2px 2px 5px #000000";
	box.style.MozBoxShadow = "2px 2px 12px #000000";
	
	close.style.position = "absolute";
	close.style.cursor = "pointer";
	close.style.zIndex = 9999;
	close.style.right = "2px";
	close.style.top = "2px";

	title.style.display = "block";
	title.style.width = "100%";
	title.style.height = "32px";
	title.style.lineHeight = "32px";
	title.style.textAlign = "center";
	title.style.backgroundColor = "#000000";
	title.style.color = "#FFFFFF";
	title.style.fontWeight = "bold";
	// CSS3
	box.style.borderRadius = "5px";
	box.style.MozBorderRadius = "5px";
	
	content.style.display = "block";
	content.style.width = (width - 8) + "px";
	content.style.minHeight = (height[0] - 40) + "px";
	content.style.margin = "4px";
	content.style.fontSize = "14px";
	content.style.overflow = "auto";

	// Affichage
	box.style.display = "block";
	
	// Cette fonction recursive permet de replacer la boite au centre meme si la fenetre est redimensionée
	replacement(box);	
}

function replacement(boite)
{
	boite.style.marginTop = -(boite.offsetHeight / 2) + "px";
	setTimeout(function(){replacement(boite)}, 200);
}

Conclusion :


Ce petit script à été réalisé plutot vite et testé uniquement sous Firefox 3.6.11 sous ubuntu.
Je le testerai en détails plus tard.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
103
Date d'inscription
mardi 12 juillet 2011
Statut
Membre
Dernière intervention
3 janvier 2013

...

J’ADORE!!!

Merci!
Messages postés
24
Date d'inscription
dimanche 16 février 2003
Statut
Membre
Dernière intervention
18 mars 2010

Bonjour,

Très interressant ce code.

J'ai une question tout de même, est-ce que le code en l'état ne pose aucun problème si je met ça en production sur un site? Ou faut-il appliquer les recommendations de JDM avant? Car je ne suis pas certain de pouvoir les appliquer seul..

Merci d'avance
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
C'est d'ailleurs ce que j'ai dit ^^ À quand la mise à jour ? :P
Messages postés
239
Date d'inscription
vendredi 20 octobre 2006
Statut
Membre
Dernière intervention
20 avril 2009

Idee interessante, mais j'ai du mal a comprendre pourquoi la majorite du code (box.style.xxxxx=yyyyy;) n'est pas simplement dans un .css ?

Il n'y a pas de raison de torturer ce pauvre browser en lui faisant mouliner du javascript a chaque ouverture d'alert. :o)
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Mais il a raison, tout écrire ce commentaire et passé en revu ce code m'a pris 1h30, merci à lui de reconnaître cela ^^ . Quand à la manière dont je l'ai fait, relire en haut mon autre commentaire ^^

@Heycraft : Ce ne sont que des propositions, tu utilises la méthode que tu veux ;) Et personnellement, je ne mettrai jamais 3 à quelqu'un a moins qu'il l'aille chercher, car les notes sur CodeS-SourceS ne peuvent être changé, donc tu restes pris avec un 3 peu importe si tu as modifié ton code et qu'il vaille désormais un 10 ;)
Afficher les 11 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.