PERSONNALISER LES BOÎTES DE DIALOGUE

Commentaire de popGG le 24/08/2007 09:48:04

C'est beaux et le code est propre. Rien à dire! J'ai hâte de voir toutes les merveilles que tu peux nous offrir avec Script.aculo.us.

C'est sans contexte un 10 ;D

Petit reproche néanmoins: je pense que tu devrais commenter un peu plus tes sources, surtout au niveau du js.

@+

Commentaire de XtremDuke le 24/08/2007 16:22:34

amezghal, remplace le bouton "valider" par un bouton "fermer" ^^

Commentaire de XtremDuke le 25/08/2007 09:48:41

Je suis de l'avis de popGG : contrairement à un prompt ou à un confirm, je ne vois pas l'interet pour une alert de geler l'execution du script.

Il est tout à fait possible de simuler une alert modale en créant un calque absolu avec les dimensions de la fenêtre puis de la surcoucher avec la boite de dialogue. (un calque noir avec une opacité de .75 est du bel effet)

Commentaire de XtremDuke le 27/08/2007 09:24:43

amezghal :
Je suis tout à fait d'accord avec toi mais comme je l'ai dit plus haut, ce script n'est applicable qu'à une alert et non un prompt ou un confirm.
Ensuite, et par définition, une fenetre modale est une fenetre dont la fermeture est obligatoire pour récuperer de focus de son parent... c'est tout. Le fait que les navigateurs gèlent les scripts pendant l'execution d'une fenetre modale n'a rien à voir avec le concept de modalité.

Have Fun

Commentaire de popGG le 30/08/2007 09:20:07

Salut XtremDuke,

Bien que la modalité d'un alert ne soit pas vraiment un problème (pour moi en tout cas), je pense que tu devrais essayer de résoudre ce conflit. Sachant que le "modal" est une fonction système, j'ai trouvé une source intéressante que je te conseille de regarder:
http://www.javascriptfr.com/code.aspx?ID=34989
window.showModalDialog me semble approprié pour une éventuelle évolution de ton alert.

Bonne journée

Commentaire de SpySeth le 28/10/2007 07:37:29

Pour cette source soit parfaite il faudrait que même lorsque les CSS sont désactivé l'on ne voit pas la boite de dialogue.

Commentaire de karimflashmx le 26/12/2007 15:23:11

salut merci pour le script c'est génial mais je veut voir comment on peut personaliser la position de la boite d'alert au melieu de l'ecran , c'est a dire si j'ai en bas de ma page un champs pour inserer une adresse email et un bouton valider alors quand j'ai fait le test je trouve que la boite s'affiche en haut ce qui meme ne se voi pas .
  

Commentaire de SpySeth le 29/12/2007 09:36:56

J'ai remarqué une erreur dans cette modification, désolé.

Donc il faut pour que ça fonctionne remplacer la fonction gerLayourOffsets() ET la fonction centerOnScreen() par ça :

function getLayoutOffsets(){
var de = document.documentElement;
var screenWidth = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var screenHeight = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
var screenHeightDecal = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
return [screenWidth,screenHeight,screenHeightDecal];
}

function centerOnScreen(obj){
var screenOffsetWidth = getLayoutOffsets()[0];
var screenOffsetHeight = getLayoutOffsets()[1];
var screenOffsetHeightDecal = getLayoutOffsets()[2];

if(obj.style.position!='absolute') obj.style.position = 'absolute';
obj.style.left = (screenOffsetWidth/2)-(obj.getWidth()/2)+'px';
obj.style.top = (screenOffsetHeight/2)-(obj.getHeight()/2)+screenOffsetHeightDecal+'px';
}

Commentaire de SpySeth le 02/01/2008 09:25:21

Dans le premier code, j'utilise une technique qui ne fonctionne que sous les navigateurs qui respecte les standards (Firefox, Opéra, Safari...) et Internet Explorer version 5.5 et inférieur. Pour IE 6 et 7 cela ne fonctionne pas :

var screenHeightDecal = window.pageYOffset || document.body.scrollTop;

window.pageYOffset <-- compris par Firefox et compagnie
document.body.scrollTop; <-- compris par IE 5.5 et moins


C'est pour ça que dans le deuxième code j'ai ajouter la méthode pour IE 6 et 7 :

var screenHeightDecal = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
return [screenWidth,screenHeight,screenHeightDecal];

document.documentElement.scrollTop <-- pour IE 6 et 7


J'ai aussi rendu le code plus logique : c'est la fonction getLayoutOffsets() qui permet de récupérer les informations de positionnement du canevas (~fenêtre) du navigateur, j'ai ajouter le bout de code (var screenHeightDecal = ...) qui récupère la position du canevas par rapport au haut de la page dans cette fonction, et j'ai modifier la fonction centerOnScreen() pour utiliser cette nouvelle information pour centrer la fenêtre.

Commentaire de SMaxime le 07/03/2008 11:42:06

Salut !!! D'abord, bravo pour le script. Mais c vrai que si le code était commenté je ne serais pas obligé de faire ce post.

Est-il possible d'utiliser ces boites de dialogues, sans avoir à cliquer sur un bouton ???
Car cela fct très bien avec un clic sur le bouton, mais pas en passant par un alert "normal".

Merci

Commentaire de SebMoine le 25/03/2008 22:40:52

cool ton script
j'ai fait ma personnalisé de message (ou boite de dialogue)
[je m'excuse pour ce doublon] le voici le mien

http://www.javascriptfr.com/codes/MESSAGE-PERSONNALISER_46177.aspx

Commentaire de XtremDuke le 02/06/2008 09:12:53

Salut karimflashmx,

Comme je l'ai dis plus haut, c'est un simple exemple d'affichage de boite de dialogue. Et ce type de personnalisation n'est pas modale. Pour empecher l'utilisateur de modifier ton formulaire, tu peux utiliser l'objet Form qu'offre Prototype. Tu trouveras certainement ton bonheur à l'adresse suivante :

http://prototypejs.org/api/form/disable

Ciao

Commentaire de Oumbra le 08/02/2010 19:55:29

Bonjour, tout d'abord exellent script qui fonctionne à la perfection.
Seul petit point noir, je n'arrive pas à le lancer sans a avoir a appuyer (ouf beaucoup de A... ^^) sur un bouton. J'ai bien essayer la méthode que tu as proposer :

"Commentaire de XtremDuke le 07/03/2008 14:49:56
SMaxime :

Oui biensur, supprime les lignes suivantes :

window.alert = function(msg){
showMsgBox(msg);
}

De ce fait, tu pourras afficher la boite perso par la fonction showMsgBox(msg) quand bon te semblera."

Mais hélas sans résultat (ni fenêtre ni message d'erreur...) je ne sais pas comment faire pouvais vous m'expliquer ?

dans mon script je dois afficher une fenêtre avec un contenu différent selon des tests en php.
Mon php fonctionne mais lorsque je fait :

<script type=\"text/javascript\">
alert('<b>Désolé,</b><br/>mot de passe érroné.');
Event.observe(window, 'load', initMsgBox, false);
</script>";

Il m'affiche une vulgaire alert (toute caca !!!) alors qu'avec un bouton :

<script type=\"text/javascript\">
alert('<b>Désolé,</b><br/>mot de passe érroné.');
Event.observe(window, 'load', initMsgBox, false);
</script>";

il m'affiche ma belleUh fenêtre.

Pourriez vous m'expliquer, s'il vous plait ?

Commentaire de Oumbra le 09/02/2010 01:18:37

J'en peux plus je ne trouve pas :'(, j'ai décortiqué les fichiers javasscript mais je ne comprends pas quelle fonction je pourrais appeler directement au lieux de passer par un onclick=alert()...

Commentaire de Oumbra le 09/02/2010 13:18:06

Bonjour XtremDuke,

Tout d'abord un grand merci pour ton attention car je désespère, je cherche vraiment d'arrache pied (si ça continu j'en aurais plus xD).

Ta solution me permet une chose, ne pas déclarer plusieurs fois : Event.observe(window, 'load', initMsgBox, false); à chaque fois que je fais un bouton pour ouvrir la fenêtre mais celà ne fonctionne toujours pas en appelant directement une alert('blabla'); dans le html au chargement de la page :'(.

Commentaire de XtremDuke le 09/02/2010 18:58:04

Si tu veux lancer une alert au chargement de ta page, essaie ça :

echo "
<input type=\"button\" value=\"Test\" onclick=\"alert('<b>Désolé,</b><br/>mot de passe érroné.')\">
<script type=\"text/javascript\">
initMsgBox();
alert(\"<b>Désolé,</b><br/>mot de passe érroné.\");
</script>";