Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Futur Membre du Club
    Comment fait-on des petites fenêtres superposées à la page html en JSF ?
    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 :



    Avez-vous une piste à me donner ?

  2. #2
    Modérateur

    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 HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    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).
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  3. #3
    Futur Membre du Club
    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 :


###raw>template_hook.ano_emploi###