Jolie alerte avec "alert()"
Soyez le premier à donner votre avis sur cette source.
Vue 14 468 fois - Téléchargée 2 018 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.
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.
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.
26 oct. 2010 à 02:15
Une petite première chose à dire : ton script contient vraiment beaucoup de codes inutiles :
" 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";
"
Tu aurais pu facilement compresser ce code comme ceci : box.style.cssText="position:absolute;z-index:9998...."
Et ce pour toutes les déclarations de style, si tu ne souhaites tout simplement leur donner une class et faire une feuille de style externe.
Pour continuer, ton code a AFFREUSEMENT beaucoup de bogue ^^ Heureusement pour toi, je peux en noter plusieurs, puisque j'ai faite exactement les mêmes erreurs que toi dans mon précédent code JDMath que je t'invite à voir ;)
Alors pour commencer, Si ta page est très très longue (c'est à dire s'il y a une barre de défilement) peu importe où tu es sur la page, ta boîte de dialogue (nom en français d'une "alert") s'affichera toujours en haut : stupide problème que l'on a avec les pourcentages. Attention de ne pas utiliser la très tentative "position:fixed" non compatible avec IE7 et - . Préfère plutôt la méthode que j'ai employé : soit empêcher l'utilisateur de défiler dans la page : pour cela met "overflow" de body à "hidden" et crée un fond, que tu peux mettre transparent si tu veux, qui empêchera l'utilisateur de cliquer sur le reste de la page. Aussi il serait bien que tu supportes le Drag & Drop pour ton script, dans JDMath je ne l'ai pas fait puisque ce n'est pas un code dédié à des boîtes de dialogues, mais comme ce l'est pour le tien, ce serait bien que tu le supportes.
Pour continuer,
Ligne 28 : content.setAttribute("class", "alertContent");
Pourquoi pas simplement content.className="alertContent"; ???
Ligne 57 : box.style.MozBorderRadius = "10px";
Où est le support pour les autres navigateurs ??? -o-border-radius, -webkit-border-radius, -icab-border-radius, -khtml-border-radius . Il est toujours important de faire de la recherche pour les propriétés CSS propriétaires.
Ligne 58 : box.style.MozBoxShadow = "2px 2px 12px #000000";
Exactement la même chose : -webkit-box-shadow. Pour IE, c'est plus compliqué, tu peux lire des informations ici : http://msdn.microsoft.com/en-us/library/ms532985(VS.85).aspx
Mais après lecture, il te faudrait quelque chose du genre :
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='#000', Positive='true')
Ligne 47-48 :
box.style.minHeight = height[0] + "px";
box.style.maxHeight = height[1] + "px";
Non reconnu par IE : http://www.alsacreations.com/actu/lire/149-min-height-sur-internet-explorer.html
Ligne 76-77 :
box.style.borderRadius = "5px";
box.style.MozBorderRadius = "5px";
Tu t'es complètement perdu ^^ C'est plutôt title qu'il faut modifier ^^ Applique aussi ici ce que je t'ai écrit en haut
Ligne 84 : content.style.overflow = "auto";
Ligne
Valeur par défaut... pourquoi la marquer ?
Ligne 43 : box.style.overflox = "hidden";
Pourquoi ? O_O Si mon texte est trop long il est couper O_O
Ligne 93-97 : HORREUR !!!! O_O Ta fonction replacement est vraiment mal faite !!! Elle prend plein de ressource pour rien puisqu'elle est appelé à toutes les 200 millisecondes !!! C'est beaucoup !!! Pourquoi n'a tu pas utiliser l'événement onResize de ? (https://developer.mozilla.org/fr/DOM/element.onresize) Sûrement que tu ne connaissais pas mais voilà ^^ Désolé pour cet instant de panique mais ta fonction a vraiment été mal faite ^^
Ligne 31 : if(typeof(aname) == "undefined")
typeof n'est pas une fonction mais un mot-clé, tu peux donc écrire : if(typeof aname == "undefined") Ça te supprime un caractère ^^
Ligne 38-39 :
var width = 360; // largeur
var height = [160, 480]; // hauteur [min, max]
Serait-t-il possible de pouvoir définir une hauteur/largeur différente pour chaque alerte =) ?
Ligne 32 : aname = "Alert window"
Ne pourrais tout simplement pas mettre un pas de titre ? Ou alors lui donner un nom plus beau ^^ Voir parfaitement, le nom du navigateur
Ligne 33 : title.innerHTML = aname;
Icchh !!! Si je donne comme titre <textarea></textarea> et bien une textarea va s'afficher. Pour y remédier :
try{
title.innerText=aname;
}
catch(e){
title.textContent=aname;
}
;)
Ligne 12 : var title = box.appendChild(span);
et
Ligne 27 : var content = box.appendChild(span);
Pourquoi donner un autre nom de variable ??? Span et title sont les mêmes variables et représentent le même objet HTML.
Ligne 8 : box.style.display = "none";
Pourquoi le cacher au début et le réafficher à la fin O_O ??? Au pire, si tu as peur que le chargement soit lent, et bien ajoute box à body seulement à la fin de la fonction
Ligne 51, 58, 59, 72, 73 :#000000 compressible par #000 et #FFFFFF par #FFF. C'est plus court, plus léger et plus lisible.
Ligne 7 : box.setAttribute("class", "alertBox");
Pour revenir sur cette ligne, où est la classe alertBox ????
Finalement, un dernier bug, lorsque je redimmensionne la fenêtre, si la boîte de dialogue est plus haute que la taille de la fenêtre du navigateur, le haut et le bas seront coupé... ce qui est gênant
"Ce petit script à été réalisé plutot vite et testé uniquement sous Firefox 3.6.11 sous ubuntu."
Losqu'un script est réalisé en vitesse et peu testé, il est facile de s'exposer à de longues critiques ... comme celle-ci ^^ Revoie ton code et comme je suis gentil je ne te mettrai pas de note . Une chance car je t'aurais mis 3 : Un code assez facile à faire mais comportant ÉNORMÉMENT de bug et comportant ANORMALEMENT de code compressible.
Donc, refais ton code, teste plus en longueur que moi, je n'ai testé que sur Safari et Firefox... Je n'ai pas osé regarder sur IE et Opéra puisque j'ose prévoir un massacre ^^
Mais ne prend pas ces critiques personnels, mais plutôt constructive ;) On apprend tous :P Et moi y compris :P
JDMCreator
Note donnée lors de la première évaluation : 3/10
26 oct. 2010 à 10:57
si ça se veut constructif, il faudrait changer de ton et enlever toutes les questions et les points d'interrogation
c'est mis en niveau débutant donc pas la prétention d'être digne d'un super développeur javascript professionnel qui aurait fait ça en 15 lignes
alors du calme, il dit bien que c'est juste une première version
ça me tue ces commentaires de mecs expérimentés dans le développement qui se la pètent et démolissent tous les nouveaux scripts qui arrivent
26 oct. 2010 à 20:35
Franchement moi je trouve très sympa les explicatiosn données.
Questions et tons franchement respectueux et superbes commentaires.
Je peux comprendre la frustration mais il faut avouer JDMCreator aurait très bien pu ne rien faire. Il a pris de son temps comme vous pour être constructif pour la communauté.
Je viens d'apprendre pas mal de choses avec le code de départ et la finalité.
Donc merci à tous les deux
27 oct. 2010 à 02:38
@MDBDev : Merci beaucoup, d'ailleurs c'est aussi de la façon que je voudrais être traité, c'est à dire précis et non pas une appréciation générale du genre "J'adore ce code ! Très utile !" (même si c'est toujours plaisant) et l'on donne un 10/10 ;)
29 août 2011 à 22:55
J’ADORE!!!
Merci!
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.