BOITE DE DIALOGUE (AVEC GRISEMENT DE LA PAGE)
nicomilville
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
-
17 août 2008 à 11:58
sinsey27 Messages postés 1 Date d'inscription jeudi 17 août 2006 Statut Membre Dernière intervention 18 mai 2009 - 18 mai 2009 à 15:32
sinsey27 Messages postés 1 Date d'inscription jeudi 17 août 2006 Statut Membre Dernière intervention 18 mai 2009 - 18 mai 2009 à 15:32
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/47624-boite-de-dialogue-avec-grisement-de-la-page
https://codes-sources.commentcamarche.net/source/47624-boite-de-dialogue-avec-grisement-de-la-page
18 mai 2009 à 15:32
Merci pour la dernière astuce concernant la fermeture. A intégrer dans le package.
Pensez à ne pas sauter de ligne dans votre contenu html sinon ca merde, c'est très con comme remarque mais sait-on jamais. Ca saurait une bonne idée de mettre le contenu html dans un fichier à part pour l'intégration.
Des news pour les versions mootools ?
11 mars 2009 à 21:58
la modif a faire pour que sa fontionne
dans la fonction dialogue() a la fin
il faut rajouter ces deux lignes
var tp = document.getElementById('taille_page')
document.body.removeChild(tp);
car le div taille_page n'est pas suprimer d'ou le probleme
ce qui donne
var griser = document.getElementById('griser');
var boite = document.getElementById('boite');
var tp = document.getElementById('taille_page')
document.body.removeChild(griser);
document.body.removeChild(boite);
document.body.removeChild(tp);
23 sept. 2008 à 16:13
En ce moment je bosse beaucoup mais dès que j'ai un moment je résoud le pb...
a++
23 sept. 2008 à 00:48
après avoir cliqué sur "griser" on aura la fenêtre. et après avoir fermé la fenêtre, on pourra plus cliqué sur le bouton "griser", il est comme bloqué et impossible de cliqué dessus.
Ce problème est sur FF 3.1 mais par contre sur IE7 ca marche bien.
16 sept. 2008 à 19:06
a++
16 sept. 2008 à 19:04
Suite à mon commentaire :
pour le grisé qui ne prend pas toute la page : j'ai un écran plat widescreen, et en bas j'ai une bande blanche :
http://www.zimagez.com/zimage/apercu43.php
Je suis sur FF2, idem sur IE7 et safari.
Voilà, @+
16 sept. 2008 à 16:21
a++
16 sept. 2008 à 16:18
16 sept. 2008 à 16:15
Pour la remarque sur les 100KM : si tu parle du scroll, j'y travail, sinon il n'y a aucun pb...
merci
a++
PS : ça veut dire quoi que tu as un code mieux que moi ? es ce une critique ? pub ?
16 sept. 2008 à 09:14
Affiche ta popup
Redimensionne ton navigateur. Et pouf tu verras le problème.
Et aussi, je ne pense pas que tu gères, au vu du code, le fait que ta page fasse 100km de haut et que l'utilisateur ira scroller dans la page.
PS : suis mes conseil, j'ai un layer qui fonctionne mieux que le tiens (en tout cas qui gère la plupart des problématiques rencontrées sur un projet) pour le meme poids mais tout dans un namespace.
Bonne chance à toi
16 sept. 2008 à 06:14
Pour le griser, que veus, tu dire ?
Pour moi (IE7, FF2, FF3) ça marche...
a++
15 sept. 2008 à 22:43
Cela faisait longtemps que je cherchais un script comme celui, très bonne source...
J'ai quelques commentaire sur son fonctionnement :
- Le grisé ne prend pas toute le hauteur de la fenêtre (largeur ok mais il manque une bonne partie de la page en bas)
- La boite du coup n'est pas centrée
- Si on clique sur "griser" puis que l'on ferme la boite, la div (
) n'est pas supprimée du code html et le reste de la page reste désactivé.
Suggestion :
- Ajouter la possibilité de passer le titre et le contenu en paramètre depuis l'appel de la fonction init_div()
Voilà!
A plus
26 août 2008 à 10:08
J'avais déja vu ce lien, merci !
a++
26 août 2008 à 10:02
http://www.wildbit.com/labs/modalbox/
25 août 2008 à 16:46
Pour les options, ne t'inquiète pas...
PS : il ne me reste qu'a adapté la taille du div au scroll...
25 août 2008 à 16:24
- Le calque gris ne prend pas toute la zone de la fenêtre. Ta fonction griserInterface() me laisse perplexe...
- La boite affichée n'est pas centrée. Normale tu centre avec des valeurs en dure.
Attention a ne pas rajouter trop d'options, tu risques de réinventer la roue..
25 août 2008 à 14:57
a++
25 août 2008 à 14:48
ok et bon courage ;)
25 août 2008 à 12:16
>>Je prend ça pour moi ;)
Pas de raison, c'est juste pour pouvoir rediriger les gens qui veulent le code source des boites de codes source...
>>Je sais pas si tu as souvenir de moi ...
Je me souvient de toi !
>>Malgrés les remarques que l'on peut te faire, je trouve que c'est une trés jolie source...
Merci
>>Dans ta version API comment le contenue sera délivré?
C'est a dire ? si tu veus savoir situ pourra mettre du code html, la réponse est oui, le contenue sera ajouté a l'aide d'un innerHTML...
>>Car je vois que dans celle-ci le contenue et encré dans la fonction
Effectivement...
>>vu que tu nous dis qu'une multitude de fonction sera dispo, je pense que c'est par ce biais que l'on fournira le contenue
Oui, tu pourra sois rajouter du contenue en mode text, sois en mode code(le code sera interpretté),et il se pourra aussi que tu construise ton formulaire a l'aide de méthodes (addButton, addSelect, addButton, etc...)
>>mais pense tu que l'on pourra délivrer un code HTML (je pense surtout à un formulaire, qui par une fenêtre dynamique rend cela plus attrayant)?
Oui, comme dit plus haut, le contenue html est accepté !
>>Depuis le dernier post ou tu m'as beaucoup aidé, j'ai trouvé quelque fonction prédéfinie, si tu as besion n'hésite pas.
Non, merci, je ne veus pas de fonction prédéfinie, je veus tout faire moi même...
a++
25 août 2008 à 12:03
Je sais pas si tu as souvenir de moi ...
Malgrés les remarques que l'on peut te faire, je trouve que c'est une trés jolie source... Dans ta version API comment le contenue sera délivré? Car je vois que dans celle-ci le contenue et encré dans la fonction, vu que tu nous dis qu'une multitude de fonction sera dispo, je pense que c'est par ce biais que l'on fournira le contenue, mais pense tu que l'on pourra délivrer un code HTML (je pense surtout à un formulaire, qui par une fenêtre dynamique rend cela plus attrayant)?
Depuis le dernier post ou tu m'as beaucoup aidé, j'ai trouvé quelque fonction prédéfinie, si tu as besion n'hésite pas.
Thomas
PS:
>>>J'ai fait cette source parce que bultez et moi on en a mare de donnée des exemple de boite comme ça a chaque question sur le forum
Je prend ça pour moi ;)
25 août 2008 à 10:29
@kegi : justement j'ai règlé ce problème sauf que j'ai pas encore posté ca j'essai d'ajouté une chose en plus...
@aladeuil : oui, ce problème aussi est règlé, enfin presque, pour centrer verticalement j'ai un problème car en fait clientHeight ne marche pas et innerHeight n'est pas compatible IE je crois...
a++
25 août 2008 à 07:11
Dis, il se passe quoi quand la page est trés longue ? Le "griser" s'allonge ou pas ?
Et ça serait top si la boite était centrée non ?
Aller, y'a des solutions... > www.highview.fr
Relance moi pour la solution, ça sera avec plaisir.
Anthony
25 août 2008 à 02:18
en fait, un problème s'est ajouté, lorsque ma fenêtre n'est pas maximisée et que je l'agrandie, le carré grisé garde la grandeur précédente, juste un petit pourcentage est grisé par la suite.
Si tu as besoin d'aide, il me fera plaisir de t'aider.
Kevin.
24 août 2008 à 20:34
- Quand tu scroll avant de griser, tuas une partie blanche et une partie noir...
- Je n'est pas de problème avec le div qui grise la page, j'en est un avec clientHeight que je n'arrive pas a résoudre, en fait j'utilise a la place de client height, offsetHeight et ça ne comprend pas que la ou le div s'affiche mais ça contient aussi les parties que l'ont pet scroller, ce qui veut dire que si tu as une page de 10000px de hauteur, le div se positionera a 5000px...
Et j'ai un second problème que je suis en train de résoudre avec bultez (que le div suive le scroll)...
a++
PS : merci de l'intéret que tu porte a cette source !
24 août 2008 à 20:19
24 août 2008 à 18:36
a++
24 août 2008 à 18:28
window.onresize=rs;
function rs(){
if(document.getElementById('griser')!=null){
var grisere = document.getElementById('griser').style;
grisere.height = 100+'%'
grisere.width = 100+'%'
}
}
et pour la fonction griserInterface
function griserInterface() {
var griser = document.getElementById('griser').style;
griser.height = 100+'%'
griser.width = 100+'%'
Obj_SetOpacity("griser", 70);
init_dialogue();
}
c'est mieux en pourcentage car sa balai toutes les resolution et sa se redimentionne automatiquement
23 août 2008 à 14:08
a++
23 août 2008 à 11:52
window.onresize=rs;
function rs(){
if(document.getElementById('boite')!=null){
document.getElementById('griser').style.width = document.body.clientWidth+20;
document.getElementById('griser').style.height = document.body.clientHeight;
}
}
la solution est bonne mais il y a un probleme la fonction me dit que (document.body.clientHeight;) nest pas defini il suffit d'ailleur de mettre
alert(document.body.clientHeight;) (clientHeight ou offsetHeight c'est du kifkif)
l'alerte retourne aucunes valeurs mai ce qui est etrange c'est que pour clientWidth j'ai bien une valeur
23 août 2008 à 11:24
Mais le problème c'est que je ne sais pas comment y remèdier...
Je crois qu'il y a un évènement onresize, j'ai essayé de l'utiliser mais ça ne marche pas...
a++
23 août 2008 à 10:40
si la fenetre du navigateur n'est pas totalement agrandi
et que je clique sur le bouton pas de probleme le script fonctionne mai si je me met a agrandir la fenetre le div du nom de (grise) celui qui cache la partie arriere en se grisant ne suis pas le redimentionnement tu a donc une partie grsé et une blanche
23 août 2008 à 09:51
a++
22 août 2008 à 22:44
en testant le script je me suis appercu qu'il avait un petit default apres avoir active le script mais que la fenetre est pas entièrement redimensionne si on la redimentionne le div (grise) ne suis pas le redimensionnement
et autre chose pour mettre la fenetre au centre tu a cette solution compatible toutes resolution
au debut de la fonction dialogue()
var centreh=(document.body.clientWidth-document.getElementById('boite').offsetWidth)/2
var centrev= document.body.clientHeight+document.getElementById('boite').offsetHeight)/2
autre ligne a modifie toujours dans la meme fonction
Obj_SetPosition("boite", centreh, centrev);
et hop c'est centre
++
20 août 2008 à 12:33
Nouveautés a venir :
- API
- Version Mootool
- Peut être une mise a jour pour que le div suive le scroll...
a++
19 août 2008 à 18:28
19 août 2008 à 18:27
19 août 2008 à 16:39
Il ne me reste plus que la fonction pour faire suivre le scroll a faire...
a++
PS : merci pour le commentaire et la note !
19 août 2008 à 16:36
19 août 2008 à 14:19
merci...
a++
19 août 2008 à 13:29
pour le css, tu met:
var doc = document.getElementById('griser').style;
doc.className = 'taClasse';
Non ?
et pour gérer les événements, tu le fait par la suite, je n'ai peut-être pas
tout compris, mais ça me semble facile à comprendre.
CSS:
.taClasse{
margin: 0px;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
position: fixed;
background-color: #000000;
zindex = 50;
}
pour la gestion du overflow du document, tu laisses la ligne comme ça:
document.documentElement.style.overflow = "hidden";
En espérant t'avoir aidé.
19 août 2008 à 08:47
Pour la feuille de style puisque tu en parle j'ai pensé a en faire une mais comme tu as due le voir après ta critique, il n'est pas possible d'en faire car après comment on fait la gestion évènementiel des fonctions...
Si tu veus mieux faire avec une feuille de style, je veus bien voir...
C'est facile de critiquer, moins facile a faire...
a++
PS : merci pour ton commentaire ou critique...
18 août 2008 à 23:14
# function griserInterface() {
# document.getElementById('griser').style.margin = "0px";
# document.getElementById('griser').style.top = "0";
# document.getElementById('griser').style.left = "0";
# document.getElementById('griser').style.height = "100%";
# document.getElementById('griser').style.width = "100%";
# document.getElementById('griser').style.position = "fixed";
# document.getElementById('griser').style.backgroundColor = "black";
# document.getElementById('griser').style.zIndex = "50";
# document.documentElement.style.overflow = "hidden";
# Obj_SetOpacity("griser", 70);
# init_dialogue();
# }
yen a plein ton code, tu voudrais pas déclarer une variable qui ferait référence à ton élémetn. Car là tu répètes un peu inutiliment la même chose.
var s = document.getElementById('griser').style;
s.backgroundColor = 'black'
s.position = 'relative';
et tu auras surtout mieux fait de mettre tout ça dans une CSS
18 août 2008 à 15:00
Merci !
>>si tu nous fais des versions....
C'est effectivement ce que je fais actuellement, je pense que finalement je vais dabord m'occuper de la version simple car je vois que pour l'instant les personnes qui viennent ici cherche avant tout une boite de dialogue simple, pas forcement un truc plein d'option, c'est pour ça que quand j'aurai fait l'API je laisserai quand même une version simple...
>> je pense "qu'on se cotisera" pour te mettre une note bien supérieure à 10
Merci, ba il me reste plus qu'a :
- Rendre la version simple compatible IE...
- Finir l'API
- Commencer la version Mootool
- Peut être faire une version scriptacouls avec des effet...
a++
PS : merci pour ces commentaires !
18 août 2008 à 14:51
Que veus tu dire ?
Pour ton information je suis actuellement webmaster de plusieurs sites...
>>mais bon même si l'intérêt, je l'avais bien compris, n'était pas là, l'harmonie des couleurs, ça existe ;-)
C'est une blague ?
De toute façon rien ne t'oblige a utiliser cette image, tu peus utiliser une autre image en background image...
Cette image n'est la que pour donner un exemple...
a++
18 août 2008 à 14:49
_ simple compatible avec (presque) tous navigateurs
_ api avec plein plein d'options
_ associées à plusieurs framework ( je ne cite pas, j'en oublierais ! )
...
je pense "qu'on se cotisera" pour te mettre
une note bien supérieure à 10
@+
18 août 2008 à 14:48
a++
18 août 2008 à 14:47
on voit que t pas info-graphiste ou webmaster : quelle faute de goût !!
mais bon même si l'intérêt, je l'avais bien compris, n'était pas là, l'harmonie des couleurs, ça existe ;-)
non sérieusement c simple et ça fonctionne alors quoi demander d'autre...
kiki
18 août 2008 à 14:45
le width et le height fonctionne bien si ma fenêtre est maximisée, si elle ne l'est pas, ton width est calculé avec la largeur maximal possible, il est possible de calculer la largeur réelle et la largeur maximal possible. De plus, il est même possible de recalculer à chaque modifications de grandeur de la fenêtre.
Penses à ça, bonne prog.
18 août 2008 à 14:40
Pour internet explorer 6 je sais et je suis en train de règler...
Par contre, pour le redimensionement, je suis étoné que le height et le width (100%) ne s'adapte pas a la fenêtre...
>>Merci a coucou747 pour l'idée...
Exusez moi, mon clavier marche vraiment très mal...
a++
PS : merci pour le commentaire...
18 août 2008 à 14:22
18 août 2008 à 14:20
Bonne source en général;
L'overflow de la page qui devient "hidden" lorsque la page est masquée, c'est bien.
Ce que j'améliorerait: prendre en considération la largeur réelle de la fenêtre (en cas de fenêtre pas complètement maximisée, ce qui par hasard était le cas chez moi lors du test) et peut-être même recalculer la largeur et la hauteur réelle en cas de redimensionnement de la fenêtre ?
Ce script ne fonctionne pas avec Internet Explorer sous Windows XP, il y à encore un nombre important de personne qui utilisent toujours ce vieux navigateur.
Voila, je note plus tard, quand je vais avoir analyser la source en entier.
Cordialement,
Kevin
18 août 2008 à 13:02
Les modification, il y en aura plusieurs...
Par exemple :
- La version normal (simple) sera mise a jourpour qu'elle marche sous IE6...
- Il y aura bientot une version API (complexe) avec plein d'options... Merci a couco747 pour l'idée...
- Il y aura bientot une version Mootool faite avec le framework mootool... Merci a pysco68 pour l'idée et l'aide apportée...
a++
18 août 2008 à 12:49
j'ai travaillé sur un script et je l'ai fait marché pour moi,
ce script est testé sous IE 6.0 et plus et FF, ça marche impec chez moi,
son lien est : http://www.wildbit.com/labs/modalbox/
Merci et bonne continuation, si tu auras des modification pour ton script tu les mets pour nous.
Merci
18 août 2008 à 11:55
Pour IE6 ba je suis en train de voir mais qu'es ce qui ne marche pas exactement ?
Je pari que c'est pour griser la fenêtre et aussi le positionement...
Comme bultez me l'a di ça doit étre a cause de la position fixed qui n'est pris en compe que par les navigateurs récent...
Bultez m'a mis sur une piste (scrollHeight, scrollWidth et les truc de ce genre)...
Comme tu as due le lire, je suis en train de transformer les fonctions javascript en API, je suis en ce moment même en train de rajouer des fonctions et aussi et possibilité du genre laisser le scroll ou le cacher...
Donc si tu le permet pour le moment, je me penche un peut sur l'API, en même temps je vais tester un peut les position qui ne posent pas de problème sur IE6...
a++
18 août 2008 à 11:43
je l'ai utilisé dans mon code, et ça marche bien sous FF, mais ça marche pas sous IE 6.0.X,
y'aura t'il une solution ?
MErci
17 août 2008 à 19:56
J'ai fait cette source parce que bultez et moi on en a mare de donnée des exemple de boite comme ça a chaque question sur le forum, maintenant on peut les rediriger vers cette source...
Sinon, la je suis en train de changer ça en API javascript, j'ai fait plein de nouvelle fonctions et l'appelle sera carement différent, c'est a dire que c'est vous qui construirez votre propre boite a travers plusieurs methodes et propriétés...
Bon ba je retourne a mes methodes...
Je suis content de voir que ça vous plais (c'est ma première source qui me rapporte un 10/10 au deuxième commentaire) franchement je ne m'attendais pas a ce que ça vous plaise autant...
a++
17 août 2008 à 19:48
sa peut être très utile ta source merci pour l'avoir partagé
17 août 2008 à 15:47
Oui, je vais penser a pousser, mais pour l'instant je vais remettre le scroll car la il est bloqué et je le remet quand on ferme la boite mais bultez m'a dit en privé que ce serai mieu de ne pas le bloquer comme code source mais que la boite s'adapte plutot au scroll...
J'ai toujours entendu parler d'API sans savoir ce que c'est, peus tu m'éclairer ?
a++
PS : merci de ton commentaire, ça fait plaisir d'avoir un commentaire comme ça, il faut dire que je n'ai pas l'habitude dans la mesure ou mes autres sources sont inutiles...
17 août 2008 à 15:35
tu pourrais pousser avec une API objet, ca ressemblerais alors a ca :
var box = new DialogBox("titre", function(){alert("vous avez ferme la fenetre"); } );
box.addButton("bouton1", function(){ alert("vous avez choisi le bouton 1"); });
box.addButton("bouton2", function(){ alert("vous avez choisi le bouton 2"); });
17 août 2008 à 11:58
a++