PERSONNALISER LES BOÎTES DE DIALOGUE
cedriclomb
Messages postés
275
Date d'inscription
samedi 19 novembre 2005
Statut
Membre
Dernière intervention
27 avril 2010
-
24 août 2007 à 09:45
ludojd Messages postés 8 Date d'inscription dimanche 15 août 2010 Statut Membre Dernière intervention 10 mars 2011 - 10 mars 2011 à 21:41
ludojd Messages postés 8 Date d'inscription dimanche 15 août 2010 Statut Membre Dernière intervention 10 mars 2011 - 10 mars 2011 à 21:41
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/43862-personnaliser-les-boites-de-dialogue
https://codes-sources.commentcamarche.net/source/43862-personnaliser-les-boites-de-dialogue
10 mars 2011 à 21:41
27 oct. 2010 à 11:17
voila j'ai une première fenêtre du type Html:
<html>
<head>
<meta http-equiv= "Content-Type" content="text/html; charset=iso-8859-1">
<LINK rel=stylesheet type="text/css" href="include/opac.css">
<title>Microbib Opac - Fiche Document</title>
<link rel="shortcut icon" href="images/icobook.ico" />
<script type="text/javascript" src="include/prototype.js"> </script>
<script type="text/javascript" src="include/window.js"> </script>
<script type="text/javascript" src="include/debug.js"> </script>
<script type="text/javascript" src="include/securite.js"></script>
<script type="text/javascript">
<!--
var sesPlus = new Array("sestitres","sesauteurs","sonresume");
function init_msg()
{
for(var i=0; i<sesPlus.length; i++)
if(document.getElementById(sesPlus[i]).style.display == "block")
document.getElementById(sesPlus[i]).style.display = "none";
}
function toggle_msg(n)
{
init_msg();
var id=sesPlus[n]; document.getElementById(id).style.display (document.getElementById(id).style.display "none" ? "block" : "none");
}
function revenir()
{
if(LireCookie('affine') == 1) location.replace('affineliste.wco');
else if(LireCookie('affine') == 2) location.replace('trier.wco');
else location.replace(LireCookie('recherche'));
}
var support = '<%= detail.document%>';
var numero = '<%= detail.no_exemp %>';
//-->
</script>
</head>
<li>[# ]</li>
<li>Le Catalogue Commun
</li>
<li>[# >>Recherche Simple]</li>
<li>[# >>Recherche Etendue]</li>
<li>[# >>Recherche par Mot-Matière]</li>
<li>[# >>Nouveautés]</li>
<li> <script language="JavaScript">
<!--
if(LireCookie(COOKIE_FONC_RESERV)==".T.")
document.write(espacelecteur());
//--></script>
<li> <script type="text/JavaScript">
<!--
if(estConnecte())
document.write(estconnecte()); ;
//--></script>
<li> <script language="JavaScript">
<!--
if('<%= multisite %>'==".F.")
document.write(reglements());
//--></script>
<li> <script language="JavaScript">
<!--
if(LireCookie(COOKIE_FONC_MULTISITE)==".T.")
document.write(multisite());
//--></script>
<%=detail.document+" N° "+detail.no_exemp%>
<center>
<%= IIF(!empty(detail.type_docum),"","NR") %>
</center>,
Titre principal,
,
<%= detail.titre %>,
----
----
Sous-Titre,
,
<%= detail.soustitre %>,
----
Autres Titres,
,
<%= detail.autre_tit %>,
----
Responsabilité,
,
<%= detail.auteur %> <%= detail.fonction %>,
----
Autres Responsabilités,
,
<%= detail.autre_aut %>,
----
Editeur/Date d'édition,
,
<%= detail.editeur %> / <%= detail.annee_ed %>,
----
Collection/Série,
,
<%= detail.collection %> / <%= detail.serie %>,
----
<%= IIF((detail.type_docum="V"),"Copyright/Support/Collation",IIF((detail.type_docum="S"),"N°Distributeur/Support/Détails",IIF((detail.type_docum="E"),"ISBN/Support","ISBN/Nb pages/Format"))) %>,
,
<%= IIF((detail.type_docum="V"),detail.copyrigh + " / " + (IIF(detail.support="A","VHS",IIF(detail.support="B","DVD",IIF(detail.support="C","DivX",IIF(detail.support="U","Autre","NR"))))) + " / " + detail.version + " " + detail.couleur + " " + TRANSFORM(detail.duree) + "minutes",IIF((detail.type_docum="S"),detail.no_distr + " / " + (IIF(detail.support="A","CD Audio",IIF(detail.support="B","K7 Audio",IIF(detail.support="C","DVD Audio",IIF(detail.support="D","Disque vinyl",IIF(detail.support="U","Autre","NR")))))) + " / " + detail.depot_le + " " + detail.type_enr,IIF((detail.type_docum="E"),detail.isbn + " / " + (IIF(detail.support="A","CD-ROM",IIF(detail.support="B","Disquette",IIF(detail.support="C","DVD-ROM",IIF(detail.support="D","Fichier numérique",IIF(detail.support="E","Site Internet",IIF(detail.support="F","Autre",IIF(detail.support="G","Textes-références-périodiques","NR")))))))),detail.isbn +" / " + detail.nb_page + " / " + detail.dimensio))) %>,
----
Bibliothèque dépositaire de cet exemplaire : <%= detail.ville %>,
<center>
<%= IIF(!empty(detail.code_lan),"","NR") %>
</center>,
----
Type de document,
,
<%= detail.statut%>,
----
Disponibilité,
,
<%= iif(empty(detail.dat_retpre),"Ce document est disponible","Retour prévu le " + dtoc(detail.dat_retpre) + "") %>,
----
Genre/Public visé,
,
<%= detail.genre %> / <%= detail.pub_vise %>,
----
Localisation/Cote,
,
<%= detail.localisati %>/ <%= detail.cote %>,
----
Mot(s) matière,
,
<%= detail.matiere %>,
----
Résumé,
,
<%= detail.resume %>
----, <center>
<hr>
<script language=\"JavaScript\">
if(LireCookie(COOKIE_FONC_RESERV)==\".T.\")
document.write(lienReservation());
</script>
</center>
</td>
<< Revenir en arrière
Site où récuperer le livre
<SELECT NAME ="site_depot">
<option value="1">premier
<option value="2">deuxieme
<option value="3">troisieme
<option value="5">quatrieme
</SELECT>
</html>
Ne vous souciez pas trop du contenu mais plutôt des dernières lignes elles font apparaitre une fenêtre Modal avec un menu a choix multiple.
Mon securite.js contient entre autre les infos suivante:
// Méthode site depot
function openDialog(id) {
Dialog.alert($(id).innerHTML, {className: "alphacube", width:300,
okLabel:"Ok",ok: reserver(),
})
EcrireCookie(COOKIE_SITE_DEPOT,$('site_depot').getInputs('text'));
}
Ma fenêtre apparait tout ce passe bien ,
mais voila mon dilemme j'aimerais récupérer dans un cookie "site_depot" le résultat choisi dans ma fenêtre modal ? comment faire ?
merci pour votre aide.
25 mars 2010 à 13:17
11 févr. 2010 à 15:23
Je vous explique donc comment avoir une boite de dialogue avec un effet modal :)
1. Placer un div en DEBUT de fichier html (JUSTE APRES body), cela simule un fond grisé mais rien de base. (mon image 'shadow.png' est une image grise):
2. Ajouter les lignes suivantes 'ShowFond();' et 'HideFond();' tel que :
<!-- dans la fonction initMsgBox() -->
window.alert = function(msg)
{
showMsgBox(msg);
ShowFond();
}
<!-- dans la fonction initMsgBox() -->
btn.onclick = function()
{
closeMsgBox();
HideFond();
}
<!-- dans la fonction showMsgBox(content) -->
$('msgBoxContent').innerHTML = content;
centerOnScreen($('msgBox'));
new Effect.Appear('msgBox',{duration:0.2});
ShowFond();
}
3. Placer les fonctions suivantes dans le fichier, cumstomMsgBox.js :
function ShowFond()
{
var Obj;
//-- on affiche le fond
Obj = document.getElementById('D_FOND');
if( Obj)
{
with( Obj.style)
{
position="absolute";
display="";
left = "0px";
top = "0px";
}
}
}
function HideFond()
{
var Obj;
Obj = document.getElementById('D_FOND');
if( Obj)
{
with( Obj.style)
{
display="none";
}
}
}
et voila vous avez désormé une boite de dialogue alert() avec un effet modal !!!
Pour appeler une boite de dialogue sans bouton ou autre évenement de l'utilisateur (click, reload, etc), placez : "Event.observe(window, 'load', initMsgBox, false);" dans le header de la page html et lorsque vous appelez votre boite (moi je le fais lorsque des restriction php sont fausses ou spéciales) et bien il suffit de faire un :
"<script language='javascript'>initMsgBox();alert('Votre message');</script>"
Voilà !!
Je remercie tout particulièrement duke pour son aide :)
Au revoir et a bientot :)
ps: je souhaite savoir s'il est possible de faire la meme chose avec une boite de dialogue prompt()???
N'hésitez pas à m'aiguiller, je fais beaucoup de recherche mais bon un peu d'aide est toujours bien venue :)
9 févr. 2010 à 20:19
Enfin pas complètement ^^'...
Avec l'amélioration que j'ai cité au-dessus (le grisage du fond) et bien ma fonction de grisage passe dessus ma belleuh fenêtre :(
Je ne sais pas ou placer ma fonction de grisage pour quelle soit affichier avant ma fenêtre.
Pourrais tu m'éclairer ?
9 févr. 2010 à 18:58
echo "
<script type="text/javascript">
initMsgBox();
alert("Désolé,
mot de passe érroné.");
</script>";
9 févr. 2010 à 13:21
echo "
<script type="text/javascript">
alert("Désolé,
mot de passe érroné.");
</script>";
Je spécifie que lorsque je charge la page l'alert() se lance bien mais sans design ni rien mais lorsque j'appuie sur le bouton miracle ça fonctionne ...
9 févr. 2010 à 13:18
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 :'(.
9 févr. 2010 à 12:43
Je ne me souviens guère de cette source mais de mémoire, voilà la démarche à suivre :
La ligne suivante : Event.observe(window, 'load', initMsgBox, false); permet d'initialiser le "moteur" de rendu des boîtes à afficher. Elle ne doit être appellée qu'une fois au chargement de ton document. Il faut placer celle-ci soit à la fin de ton document, soit dans l'entête (balise <header>).
En suite, il ne reste plus qu'à lancer une 'alert()' classique quand bon te sembles.
Donc dans l'ordre : initialiser le rendu au chargement du document via "Event.observe(..." puis lancer une 'alert()' quand tu en as besoin.
9 févr. 2010 à 01:18
9 févr. 2010 à 00:02
echo "
<script type="text/javascript">
Event.observe(window, 'load', initMsgBox, false);
</script>";
Je tiens également que le problème de modal peu être 'bidouillé' il suffit d'appliquer les choses suivante :
1. Placer un div en fin de fichier html (juste avant body), cela simule un fond grisé mais rien de base. (mon image 'shadow.png' est une image grise):
2. Ajouter les lignes suivantes 'ShowFond();' et 'HideFond();' tel que :
window.alert = function(msg)
{
showMsgBox(msg);
ShowFond();
}
btn.onclick = function()
{
closeMsgBox();
HideFond();
}
3. Placer les fonctions suivantes dans le fichier, cumstomMsgBox.js :
function ShowFond()
{
var Obj;
//-- on affiche le fond
Obj = document.getElementById('D_FOND');
if( Obj)
{
with( Obj.style)
{
position="absolute";
display="";
left = "0px";
top = "0px";
}
}
}
function HideFond()
{
var Obj;
Obj = document.getElementById('D_FOND');
if( Obj)
{
with( Obj.style)
{
display="none";
}
}
}
Voila le tour est joué.
Mais j'ai toujours mon problème d'appel de cette fonction :'(.
Je n'arrive à l'appeler que par onClick ...
Dès lors que je fais un simple :
echo "
<script type="text/javascript">
alert('Désolé,
mot de passe érroné.');
Event.observe(window, 'load', initMsgBox, false);
</script>";
Cela n'affiche qu'une alert('Désolé,
mot de passe érroné.') basique...
8 févr. 2010 à 19:55
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(' Désolé,
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('Désolé,
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 ?
2 juin 2008 à 10:49
2 juin 2008 à 09:12
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
31 mai 2008 à 11:55
dans mon cas j'ai un formulaire et j'ai utiliser ce code pour la vérification des champs , mais dés que la boite est ouvert je trouve que je peut touchez au champs les modifier même que la cette boite d'alerte est ouvert .
comment faire pour que je désactive l'accé au formulaire lorsque la boite est ouvert.
merci d'avance
25 mars 2008 à 22:40
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
7 mars 2008 à 14:49
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.
7 mars 2008 à 11:42
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
3 janv. 2008 à 16:40
2 janv. 2008 à 09:25
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.
29 déc. 2007 à 21:13
merci
29 déc. 2007 à 09:36
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';
}
28 déc. 2007 à 14:19
function centerOnScreen(obj){
var screenOffsetWidth = getLayoutOffsets()[0];
var screenOffsetHeight = getLayoutOffsets()[1];
var screenHeightDecal = window.pageYOffset || document.body.scrollTop;
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)+screenHeightDecal+'px';
}
26 déc. 2007 à 15:23
28 nov. 2007 à 14:48
par contre, est-ce qu'on peut faire en sorte qu'il y ait un évènement "hover" sur le bouton "Valider" ? De manière à faire comme sur le bouton qui ferme la fenêtre.
28 oct. 2007 à 07:37
31 août 2007 à 10:10
30 août 2007 à 09:20
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
27 août 2007 à 19:30
27 août 2007 à 09:24
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
25 août 2007 à 13:16
..., car "modale" est une fonction systeme.
25 août 2007 à 09:48
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)
24 août 2007 à 18:02
Actuellement, sur ta source, on peut réaliser d'autres opérations tout en mettant ton message sur le côté. (bon c'est pas trop génant ce truc... Ton message a bien été envoyé et j'ai pu lire son contenu ce qui est, avant tout, son boulot non??).
Je suis pas expert prototype.js ou scriptaculous donc je préfère ne pas dire de connerie mais je pense qui y a moyen de contourner le problème avec des evenements (quand j'sais pô, j'bidouille voila!...). Mais perso, je laisserais tel quel car le modal d'un alert ne sert à rien (c'est mon avis).
En tout cas, merci pour ta source, je vais surement l'utiliser pour mon site perso si ça ne te gène pas (z'aime bien ze qui est zolie)...
24 août 2007 à 16:22
24 août 2007 à 13:36
la boite à message n'est pas modal...
donc ton bouton "valider" sert à rien, car le script va continué de s'executé
24 août 2007 à 09:48
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.
@+
24 août 2007 à 09:45