Comment fait-on des petites fenêtres superposées à la page html en JSF ?

1 pièce(s) jointe(s)

Comment fait-on pour avoir une petite fenêtre superposée à la page html dans lequel se trouve du contenu JSF ?

Par exemple, j'aimerai faire une sorte de pop-up (mais qui n'en est pas un) comme les notifications youtube, cf la capture d'écran ci-dessous :

Pièce jointe 518448

Avez-vous une piste à me donner ?

A priori, à moins que je n'ai pas tout compris de ta question, du simple html avec css suffisent pour faire ce genre de chose.
Tu peux copier ce code dans un fichier html pour voir
Code:

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 <!DOCTYPE html> <html> <head> <meta charset="UTF-10"/> <style> #overlay{ position:absolute; top:50px; left:50px; z-index:2; display:none; width:200px; height:150px; overflow:auto; border-style:solid; border-color:#909090; border-width:1px; background-color:#f0f0f0; } </style> </head <body> <p>Ceci est un texte simple.<br/> Il pourrait faire toute la page mais on va<br/> s'arrêter là... <button onclick="document.getElementById('overlay').style.display='block'">Afficher</button> </p> <div id="overlay"> Petite fenêtre en superposition de l'autre. Il faudra redimensionner pour que ça tienne sur moins de ligne que là... A vous de voir... </div> </body> </html>
L'attribut z-index permet de déterminer à quel niveau, dans la pile du DOM, se trouve l'élément.
Un z-index 1 se retrouve devant les éléments qui n'ont pas de z-index, un z-index 2 se retrouverait encore au dessus, etc...

Maintenant, si tu veux afficher une vidéo ou une image ou un autre site dans une "fenêtre" de cet aspect, il faudra passer par un <iframe> (il est toujours possible d'utiliser les z-index avec) et changer par script la source de l'iframe (attribut src).

1 pièce(s) jointe(s)

Si, t'as bien compris ma question. C'est exactement ça qui me fallait, bien que ce soit plus un problème html/css effectivement. Mais merci de m'avoir répondu même si c'est pas forcément dans la rubrique dédiée. Sinon, pas besoin d'iframe, avec une simple div j'ai pu ajouter une image : Ca donne ça sur mon site :

Pièce jointe 519157