Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Librairie affichage "popup"

10 réponses
Avatar
Pierre Goiffon
Bonjour,

Suite au fil précédent "Bon script d'infobulles ?", je recherche un
script me permettant d'afficher n'importe quel bout de code HTML en
"popup" au milieu de la fenêtre. Je ne veux pas de fenêtre séparée,
juste afficher un formulaire ou des rédactionnels mis en forme au milieu
de la page courante, en sur-impression. Bref une sorte de tooltip géant,
centré au milieu du viewport, et pouvant contenir n'importe quel HTML.

10 réponses

Avatar
Pierre Goiffon
Pierre Goiffon wrote:
Suite au fil précédent "Bon script d'infobulles ?", je recherche un
script me permettant d'afficher n'importe quel bout de code HTML en
"popup" au milieu de la fenêtre. Je ne veux pas de fenêtre séparée,
juste afficher un formulaire ou des rédactionnels mis en forme au milieu
de la page courante, en sur-impression. Bref une sorte de tooltip géant,
centré au milieu du viewport, et pouvant contenir n'importe quel HTML.


Pour être plus clair, ce que je recherche c'est quelque chose
d'identique à l'exemple "Layout Widgets / Dialog" de Dojo (à voir sur
http://dojotoolkit.org/). Je n'intègrerai pas la librairie Dojo pour si
peu... Bon je pars à la recherche en utilisant le mot clé "modal dialog"

Avatar
ASM
Pierre Goiffon wrote:
Suite au fil précédent "Bon script d'infobulles ?", je recherche un
script me permettant d'afficher n'importe quel bout de code HTML en
"popup" au milieu de la fenêtre. Je ne veux pas de fenêtre séparée,
juste afficher un formulaire ou des rédactionnels mis en forme au
milieu de la page courante, en sur-impression. Bref une sorte de
tooltip géant, centré au milieu du viewport, et pouvant contenir
n'importe quel HTML.



Le problème est la hauteur du popup,
à moins que tu n'acceptes qu'il ne soit fixe

exemple :
http://perso.orange.fr/stephane.moriaux/truc/HttpRequest/v_1/goiffon
(adaptation rapide d'existant)

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Contact : http://stephane.moriaux.perso.wanadoo.fr/contact
ASM = Aimable Stéphane Moriaux = Amateur Sasseur Merdouilles


Avatar
Pierre Goiffon
Merci beaucoup Stéphane de ta réponse

Entretemps, avec les bons mots clés ("modal dialogbox" ou "lightbox"
avec javascript library) j'ai pu trouver plusieurs liens intéressants :

- la "vraie" fenêtre modale (un window.open qui ne peut jamais passer
en-dessous du navigateur) :
http://www.dannyg.com/support/modalFix.html

- simple, efficace :
http://luke.breuer.com/tutorial/javascript-modal-dialog.aspx

- un peu plus compliqué :
http://www.wingo.com/dialogbox/index.html

- tout terrain :
http://particletree.com/features/lightbox-gone-wild/

- dans la librairie Yahoo (impressionant, gère la soumission du
formulaire dans la dialogbox par xmlhttprequest) :
http://developer.yahoo.com/yui/container/dialog/index.html

- avec des tas d'effets delamort :
http://www.alwaysbeta.com/2006/02/08/building-ab-customizing-lightbox/

J'étais bien attiré par la librairie Yahoo, mais ça fais vraiment bcp
pour ce que je veux faire. Je me suis tourné vers ce dernier :
http://javascript.about.com/library/blmodald2.htm

Simple, léger, exactement ce que je voulais ! Parfait pour ainsi dire :)
Avatar
ASM
Merci beaucoup Stéphane de ta réponse


Mais de rien :-)

Entretemps, avec les bons mots clés ("modal dialogbox" ou "lightbox"
avec javascript library) j'ai pu trouver plusieurs liens intéressants :

- la "vraie" fenêtre modale (un window.open qui ne peut jamais passer
en-dessous du navigateur) :
http://www.dannyg.com/support/modalFix.html


Bon ... ça ne marche pas dans mon FF
puisque Window.open -> hop! dans onglet

Et puis je n'avais pas compris ça de ton cahier des charges.

- simple, efficace :
http://luke.breuer.com/tutorial/javascript-modal-dialog.aspx


La je retiens le coup du fond opacifiant et anti-click
(hop ajouté dans mon 'tit truc vite fait)

- dans la librairie Yahoo (impressionant, gère la soumission du
formulaire dans la dialogbox par xmlhttprequest) :
http://developer.yahoo.com/yui/container/dialog/index.html


Alors là, outre qu'ils ne se décident pas à parler français, plus
compliqué tu meurs ! (lib ceci qui a besoin de lib cela qui ...)

Et puis le XMLHttpRequest dans le faux-vrai-popup, ça n'est pas dur
(mon 'tit bidouillage le fait bien !)

J'étais bien attiré par la librairie Yahoo, mais ça fais vraiment bcp
pour ce que je veux faire. Je me suis tourné vers ce dernier :
http://javascript.about.com/library/blmodald2.htm

Simple, léger, exactement ce que je voulais ! Parfait pour ainsi dire :)


Sauf que je ne suis pas arrivé à le faire fonctionner chez moi :-(
(y a une erreur qque part ...)
Et puis léger, léger ... pas tant que ça.

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Contact : http://stephane.moriaux.perso.wanadoo.fr/contact
ASM = Aimable Stéphane Moriaux = Amateur Sasseur Merdouilles

Avatar
ASM
Merci beaucoup Stéphane de ta réponse


Mais de rien :-)


Alors voici une version que j'aimerais qu'on me dise si ça passe avec IE
Windows :

http://perso.orange.fr/stephane.moriaux/truc/HttpRequest/v_1/2

Merci.


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Contact : http://stephane.moriaux.perso.wanadoo.fr/contact
ASM = Aimable Stéphane Moriaux = Amateur Sasseur Merdouilles


Avatar
Pierre Goiffon
ASM wrote:
Alors voici une version que j'aimerais qu'on me dise si ça passe avec IE
Windows :

http://perso.orange.fr/stephane.moriaux/truc/HttpRequest/v_1/2


Qu'on te le dise : les lightbox s'affichent bien mais... pas centrées
comme elles le sont sous Firefox (complètement décalées, même) (test
sous IE 6 XP SP2, tous patchs passés).

Avatar
Pierre Goiffon
ASM wrote:
- dans la librairie Yahoo (impressionant, gère la soumission du
formulaire dans la dialogbox par xmlhttprequest) :
http://developer.yahoo.com/yui/container/dialog/index.html


Alors là, outre qu'ils ne se décident pas à parler français, plus
compliqué tu meurs ! (lib ceci qui a besoin de lib cela qui ...)


C'est une grosse librairie alors forcément... Mais le nombre de choses
gérées est assez impressionant !

http://javascript.about.com/library/blmodald2.htm


Sauf que je ne suis pas arrivé à le faire fonctionner chez moi :-(
(y a une erreur qque part ...)
Et puis léger, léger ... pas tant que ça.


Ha ? Etonnant, ça fonctionne bien de mon côté. As-tu bien fais charger
la fonction initmb() en onload de la page ?

Pourquoi trouve-tu que ce n'est pas léger ? Ca semble passer de partout...


Avatar
ASM
ASM wrote:
Alors voici une version que j'aimerais qu'on me dise si ça passe avec
IE Windows :

http://perso.orange.fr/stephane.moriaux/truc/HttpRequest/v_1/2


Qu'on te le dise : les lightbox s'affichent bien mais... pas centrées
comme elles le sont sous Firefox (complètement décalées, même) (test
sous IE 6 XP SP2, tous patchs passés).


Le popup est placé suivant la méthode de centrage :
top: 50% left: 50%;
width: 300px; margin-left: -150px;
height: 200px; margin-top: -100px;

J'y comprends rien, même Opera décale vers le haut, comme s'il ne
comprenait pas :
var p = document.getElementById('pop').style;
p.marginTop = '-'+arguments[1]/2+'px';
De même, il ne change pas le fond du document ... ! ?

Bien qu'une alarme me montre qu'il n'y a pas d'erreur de calcul.
Comme la console d'erreurs qui reste muette.

Un test simple basé sur ces instructions :
document.getElementById('pop').style.marginTop = '-100px';
document.getElementById('pop').style.top = '70%';
document.body.style.backgroundColor = '#999';
fonctionne pourtant impeccablement ...
Ha ? tien ? ça ne fonctionne que si une à une.
Envoyées ensemble : au bonheur la chance le résultat ! :-((


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé


Avatar
ASM
ASM wrote:

http://javascript.about.com/library/blmodald2.htm


Sauf que je ne suis pas arrivé à le faire fonctionner chez moi :-(
(y a une erreur qque part ...)
Et puis léger, léger ... pas tant que ça.


Ha ? Etonnant, ça fonctionne bien de mon côté. As-tu bien fais charger
la fonction initmb() en onload de la page ?


Je re regarderai un de ces 4.

Pourquoi trouve-tu que ce n'est pas léger ? Ca semble passer de partout...


Disons qu'une fois remis en forme ça fait tt de même quelques lignes,
à comparer à ma 'tite adaptation (qui a grossi et qui n'a pas l'air
d'être au top :-( ).


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Contact : http://stephane.moriaux.perso.wanadoo.fr/contact
ASM = Aimable Stéphane Moriaux = Amateur Sasseur Merdouilles



Avatar
Pierre Goiffon
ASM wrote:
http://javascript.about.com/library/blmodald2.htm


Et puis léger, léger ... pas tant que ça.



Pourquoi trouve-tu que ce n'est pas léger ? Ca semble passer de
partout...


Disons qu'une fois remis en forme ça fait tt de même quelques lignes,
à comparer à ma 'tite adaptation (qui a grossi et qui n'a pas l'air
d'être au top :-( ).


Je suppose que dès lors que l'on veut traiter plusieurs navigateurs, il
faut en passer par là... Je parlais de légèreté dans le sens où l'on n'a
qu'un .js à charger, et une fonction à ajouter en onLoad.