IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

JSF Java Discussion :

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


Sujet :

JSF Java

  1. #1
    Membre à l'essai
    Homme Profil pro
    développeur
    Inscrit en
    Octobre 2019
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : développeur
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2019
    Messages : 19
    Points : 14
    Points
    14
    Par défaut 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 :

    Nom : Capture d’écran (6).png
Affichages : 1049
Taille : 472,2 Ko

    Avez-vous une piste à me donner ?

  2. #2
    Modérateur
    Avatar de OButterlin
    Homme Profil pro
    Inscrit en
    Novembre 2006
    Messages
    7 310
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 7 310
    Points : 9 522
    Points
    9 522
    Billets dans le blog
    1
    Par défaut
    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
    Membre à l'essai
    Homme Profil pro
    développeur
    Inscrit en
    Octobre 2019
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : développeur
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2019
    Messages : 19
    Points : 14
    Points
    14
    Par défaut
    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 :

    Nom : Capture d’écran (7).png
Affichages : 952
Taille : 140,1 Ko

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 26/03/2019, 11h02
  2. Organigramme fait avec des formes en bas de page
    Par EngueEngue dans le forum Word
    Réponses: 2
    Dernier message: 04/12/2013, 19h23
  3. Réponses: 1
    Dernier message: 10/04/2012, 10h28
  4. Réponses: 2
    Dernier message: 04/06/2007, 10h33
  5. Réponses: 8
    Dernier message: 26/03/2006, 16h09

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo