Discussion :

[Alban 56]

Bonjour à toutes et à tous,

J'ai placé ce message sur mon forum:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script>
        usr = "{USER&amp;#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

[javatwister]

tente un zoom;

[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.

[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.

[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

[sdamart]

Solution 2
redéfinir la fonction alert

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Alban 56]

J'ai copié ce code sur la page de présentation de mon forum, il apparait tel quel sur mon forum.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 !

[sdamart]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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"
    }
  }
})

[Alban 56]

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