Message pour présentation

Version imprimable

Bonjour à toutes et à tous,

J'ai placé ce message sur mon forum:
Code:

1 2 3 4 5 6 7 8 <script> usr = "{USER&#8288;NAME}"; post_num = {USERCOUNTPOST}; if (post_num == 0 && usr != "Ospite"){ alert("Bonjour {USERNAME}! Merci de t'être inscrit sur ce forum. Il manque encore une petite formalité pour terminer ton inscription. Clique sur OK pour te présenter à la communauté, sinon tu ne pourras pas accéder à la plupart des rubriques de ce forum."); document.location.href='http://mon-forum.forumactif.com/f3-presentation'; } </script>
Mais le texte est d'une taille minuscule, j'ai essayé de l'agrandir avec des balises "font" mais ça ne fonctionne pas.

Y a t il une solution ?

D'avance merci pour votre aide et bonnes fêtes de nouvel an.

Cordialement,
Alban

29/12/2012, 09h19
javatwister

tente un zoom;
29/12/2012, 09h52
Bovino

Il n'est pas possible de gérer l'affichage d'une boite alert().
Ce n'est d'ailleurs pas la meilleure solution pour afficher un message de façon moderne et conviviale.
29/12/2012, 11h52
Alban 56

Merci pour votre réponse Bovino, vous pourriez me dire ce que vous préconiseriez dans un cas comme celui-ci ? je n'ai aucune idée.
29/12/2012, 14h18
sekaijin

créer un DIV qui couvre la page de gris
créer un div qui contient le message avec un bord et une couleur de fond neutre
ajouter dans ce dernier un ou des boutons

c'est tout
A+JYT

Solution 2
redéfinir la fonction alert

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
			window.alert=function(_message){
//1 créer un block overlay
var overlay=document.createElement("DIV");
 
//2 créer un block pour le message
var message=document.createElement("DIV");
message.style["width"]="500px";
message.style["height"]="450px";
 
//3 subdiviser le block en 2
var header=document.createElement("DIV");
header.style["height"]="50px";
var content=document.createElement("DIV");
content.style["height"]="400px";
 
//4 créer un bouton "close"
var close=document.createElement("button");
close.innerHTML="X";
close.onclick=function(){
document.body.removeChild(overlay);
}
 
//5 on affiche le message
content.innerHTML=_message;
 
//6 On intégre tout les éléments
header.appendChild(close);
message.appendChild(header);
message.appendChild(content);
console.dir(content);
overlay.appendChild(message);
//7 on affiche le tout
document.body.appendChild(overlay);
}

Exemple d'appel

Code:

alert("ceci est mon <span style=\"font-size=24pt\">Test</span>");

Ici c'est une fonction basique. Tu peux ajouter des classe aux block overlay, message, content et header pour styliser le tout avec du CSS

Bonne Chance.:ccool:

30/12/2012, 20h47
Alban 56

J'ai copié ce code sur la page de présentation de mon forum, il apparait tel quel sur mon forum.
31/12/2012, 10h41
sdamart
Je ne comprend vraiment le sens de ton message, mais bon tâchons de préciser la marche à suivre.

1 tu créer un fichier *.js dans lequel tu colle l'implémentation de la fonction alerte

2. Tu modifie quelque peu cette implémentation pour incorporer des classes.
par exemple
Code:

1 2 3 4 ... var overlay=document.createElement("DIV") overlay["class"]="msg_overlay" ...
3. dans un fichier *.css tu créer les classes en questions
par exemple
Code:

1 2 3 4 ... .msg_overlay{position:relative; background:rgba(120,120,120,0.5);} .msg_header{height:50px; background:#FEDEDE; border-top-left-radius:5px;} ...
4. dans ta page de présentation, tu utilise la fonction alerte comme d'habitude.

Bonne chance:ccool:
31/12/2012, 10h44
Bovino

Redéfinir une méthode native de JavaScript comme alert() est loin d'être une bonne méthode !
Mieux vaut créer sa propre fonction et utiliser celle-ci !

Parfaitement d'accord avec toi. Mais la pour le coup ça aurait pu être un bonne exercice.
Jouons à créer une autre fonction plus pertinente avec JSON

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
function tag(tagName){
var tag=document.createElement(tagName)
/*Ajouter une fonction html*/
tag["html"]=function(val){
if(val!=undefined)
tag.innerHTML=val;
else
return tag.innerHTML;
}
/*Ajouter une fonction css*/
tag["css"]=function(name,val){
if(val!=undefined)
       tag.style[name]=val;
else
       return tag.style[name]
}
/*Ajouter une fonction attr*/
function attr(name,val){
if(val!=undefined)
   tag[name]=val;
else
   return tag[name];
}
/*Ajouter vos propres events pour la suite*/
tag["click"]=function(fn){
if(tag.attachEvent)
	tag.attachEvent("onclick",fn,false);			
else
	tag.addEventListener("click",fn);
}
/*Ajouter une fonction d'intégration "add"*/
tag["add"]=function(item){
if(typeof item=="array"){
for(var i in item){
tag.appendChild(i);
}
}else tag.appendChild(item);
}
return tag
}
function customAlert(p){
var m="";
var c=null;//event Close
var opt={} // autre option
/*1 savoir s'il s'agit d'un JSON ou non*/
 
if(typeof p =="string")// il s'agit du message
m=p;
}else{
m=(p.message!=undefined)?p.message:"";
c=(p.close!=undefined)?p.click:null
opt=(p.options!=undefined)?p.options:{};
/*1 créer l'overlay*/
var overlay=tag("DIV");
/*Si je click sur l'overlay mon block disparaît*/
overlay.click(function(){
document.body.removeChild(overlay);
if(c!=null)
c.call();
});
/*Ajoutons une classe pour le custom*/
overlay["class"]+="msg_overlay";
 
/*2 créer la boîte en elle même*/
var box=tag("DIV");
/*On ajoute une classe pour le custom*/
box["class"]+="msg_mainBox";
/*3 Subdivisons cette boîte*/
var header=tag("DIV");
header["class"]="msg_header";
/*A t-on des options liées au entête ?*/
if(opt.header!=undefined){
/*Souhaite t-on un titre ?*/
if(op.header.title!=undefined)
var title=tag("SPAN").html(opt.header.title);
/*Autre options a ajoutée ...*/
/*On intégre les diférentes options*/
header.add([title,...]);
}
/*répéter l'opération pour le contenu, et le block boutons*/
document.body.appendChild(overlay);
}

Voila petit exercice sympa et formateur et sa vous donne l'occasion de générer des composants du DOM plus pertinent que ce que le JS natif peut vous offrir
pour l'appeler

Code:

1
2
3
4
5
6
7
8
9
10
customAlert({
message:"ceci est mon message",
close:function(){window.location.href="mypage.html";},
options:{
    header:{
       title:"Test d'alert",
       icon:"mesImages/mesIcons/monIcon.png"
    }
  }
})

:ccool:

01/01/2013, 23h35
Alban 56

Heu oui mais je suis complètement dépassé. :oops: