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

Mise en page CSS Discussion :

Modale qui ne prend pas tout l'écran


Sujet :

CSS

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    juillet 2008
    Messages
    147
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2008
    Messages : 147
    Points : 70
    Points
    70
    Par défaut Modale qui ne prend pas tout l'écran
    Bonjour ! j'ai un petit souci avec ma modale, j'aimerais qu'elle prenne tout l'écran quand elle apparait mais ca ne marche pas, celui ci apparait en bas de page la hauteur est proportionnel au contenu mais pas à la page :/

    index.php
    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
    43
    44
    45
    <section id="portfo" class="portfolio col-span-6 grid grid-cols-6 justify-center bg-gray-100 py-8 px-4">
                <h2 class="col-span-6 justify-self-center mb-2 text-3xl font-bold z-10">Portfolio</h2>
                <div class="border border-black border-solid col-span-6 w-20 justify-self-center my-10"></div>
                <div class="text-5xl text-gray-300 absolute font-bold text-opacity-50 text-center col-span-6 left-0 right-0">PORTFOLIO</div>
                <div class="pf col-span-3 mx-4 flex flex-col items-center justify-center">            
                    <div class="pf__cv">
                        <h3>CV</h3>
                        <img class="pf__cv--img trans" src="pics/vanilla-cv.png"/>     
                        <div class="modal h-full w-full bg-black hidden z-20 bg-opacity-50 absolute flex top-0 left-0">
                            <div class="modale bg-white flex flex-col m-10 p-6 md:m-20 lg:m-32 xl:m-64">
                                <div class="modTitle flex flex-row justify-center items-center">
                                    <h3 class="text-5xl font-bold">Mon CV</h3>
                                    <div class="closed cursor-pointer">
                                        <svg></svg>
                                    </div>
                                </div>                    
                                <div class="border-t border-solid border-gray-200 h-1 overflow-visible after m-2"></div>
                                    <div class="flex flex-col justify-center items-center lg:flex-row">
                                        <div class="flex flex-col justify-between items-center lg:w-1/2">                                        
                                            <img class="imgmod my-4" src="pics/cv-1.png"/>
                                            <h4 class="text-3xl mb-2 font-semibold">Production</h4> 
                                            <div class="flex flex-col items-start justify-center">                                
                                                <ul class="desc text-sm md:text-xl">
                                                    <li class="list-disc">HTML/CSS/JS</li>
                                                    <li class="list-disc">Site responsive</li>
                                                    <li class="list-disc">Github</li>
                                                </ul>
                                            </div>                        
                                        </div>
                                        <div class="flex flex-col justify-between items-center lg:w-1/2">                                    
                                        <img class="imgmod my-4" src="pics/cv-2.png"/>
                                        <h4 class="text-3xl mb-2 font-semibold">Infos</h4>
                                        <div class="desc text-left sm:mx-16 lg:my-0 lg:mx-20 text-sm md:text-xl">
                                           Lorem ipsum.
                                        </div>
                                    </div>
                                </div>
                                <div class="flex flex-col justify-center items-center bg-gray-200 mt-4 p-2 hover:bg-gray-400 cursor-pointer">
                                    <a href="www.google.fr" target="_blank" class="text-xl">Visiter le site</a>
                                </div>
                            </div>            
                        </div>
                    </div>
               </div>
    </section>

    script.js
    Code js : 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
    const clik = document.getElementsByClassName('trans');
    const modal = document.getElementsByClassName('modal');
    const closed = document.getElementsByClassName('closed');
     
     
     
    for(let i=0; i<clik.length; i++){
        clik[i].addEventListener('click',function(){
            console.log("index : "+i);
            modal[i].style.display = 'block';
        })    
    }
     
     
    for(let i=0; i<closed.length; i++){
        closed[i].addEventListener('click',function(){
            console.log("index : "+i);
            modal[i].style.display = 'none';
        })    
    }


    comment je pourrais remédié à ce souci ? merci d'avance pour votre aide car j'ai essayé plein de chose et j'ai perdu une demi journée la dessus !!

  2. #2
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 718
    Points : 2 463
    Points
    2 463
    Par défaut
    Bonjour,

    Merci de préciser le framework utilisé, ça pourrait aider.

    Toujours est-il que je vois les classes suivantes modal h-full w-full bg-black hidden z-20 bg-opacity-50 absolute flex top-0 left-0D'après ce que je lis, j'imagine que la modal est bien définie en width: 100% grâce à la classe .w-full, on peut voir également qu'elle est en position absolue; cela ne veut donc pas dire que la modal fera 100% de l'écran mais bien 100% du premier élément parent qui est en position: relative;.

    Vu qu'on a pas d'info sur le framework, aucune idée de qui pourrait être en position relative avec certitude mais habituellement, toutes les colonnes et/ou les row le sont.

    Bref, si vous souhaitez que votre modal fasse 100% de l'écran, mettez là dans le container de l'écran et mettez la en position: fixed; (attention du coup, ce n'est pas le même comportement évidemment !)

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    juillet 2008
    Messages
    147
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2008
    Messages : 147
    Points : 70
    Points
    70
    Par défaut
    Bonjour et merci de la réponse !

    Je travail avec Tailwind !

    Alors j'avais déjà tenté en position : fixed au lieu de l'absolue et le souci c'est qu'on ne voit pas tout le contenu de la modale quand je suis sur une vue réduite de type smartphone

  4. #4
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 718
    Points : 2 463
    Points
    2 463
    Par défaut
    Bonjour,

    Désolé, il n'y a pas de rapport entre un position fixed et le responsive qui n'est pas correct
    D'ailleurs ça me laisse penser que le même problème se produira quand vous aurez résolu l'emplacement de votre modal.

    Je vous invite à relire le début de mon message précédent : sortez la modal de votre container si vous ne voulez pas qu'elle soit positionnée par rapport à celui-ci

    Et sinon, j'aime bien avoir la possibilité de pouvoir styliser grâce à des classes mais ici c'est vraiment à outrance
    D'ailleurs, si la modal ne fait pas 100% de la largeur c'est parce que c'est spécifiquement écrit dedans :

    J'ai fait un Codepen où je m'étonnais que la modal ne fasse pas 100% et c'est là que j'ai constaté que les classes md:m-20 lg:m-32 xl:m-64 ajoutent un margin à chaque fois !

    https://codepen.io/DarkStar123456/pen/vYmodWz

  5. #5
    Membre régulier
    Profil pro
    Inscrit en
    juillet 2008
    Messages
    147
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2008
    Messages : 147
    Points : 70
    Points
    70
    Par défaut
    Merci ! J'ai donc fait quelques modif en suivant les instructions et le codepen (j'ai enlever les classes pour responsive de la modale, pour le moment, et enlever un "flex" inutile) mais du coup, la modale apparait en haut de la page et pas à l'endroit ou l'utilisateur clique ! Mais je pense que c'est normal... du coup j'ai du ruser un peu en créant une div a part pour le background noir avec opacité en fixed et la modale toujours en absolue en réglant le top :


    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
    43
    44
    45
    46
    47
    48
    <body>
        <div class="h-full w-full bg-black bg-opacity-50 z-20 hidden fixed" id="dark"></div>    
        <section id="portfo" class="portfolio col-span-6 grid grid-cols-6 justify-center bg-gray-100 py-8 px-4">
                <h2 class="col-span-6 justify-self-center mb-2 text-3xl font-bold">Portfolio</h2>
                <div class="border border-black border-solid col-span-6 w-20 justify-self-center my-10"></div>
                <div class="text-5xl text-gray-300 absolute font-bold text-opacity-50 text-center col-span-6 left-0 right-0">PORTFOLIO</div>
                <div class="pf col-span-3 mx-4 flex flex-col items-center justify-center">            
                    <div class="pf__cv">
                        <h3>CV</h3>
                        <img class="pf__cv--img trans" src="pics/vanilla-cv.png"/>     
                    </div>
                </div>
        </section>
        <div class="modal h-full w-full hidden z-30 absolute">
                <div class="modale bg-white flex flex-col m-10 p-6">
                    <div class="modTitle flex flex-row justify-center items-center">
                        <h3 class="text-5xl font-bold">Mon CV</h3>
                        <div class="closed cursor-pointer">
                            <svg></svg>closed
                        </div>
                    </div>                    
                    <div class="border-t border-solid border-gray-200 h-1 overflow-visible after m-2"></div>
                        <div class="flex flex-col justify-center items-center lg:flex-row">
                            <div class="flex flex-col justify-between items-center lg:w-1/2">                                        
                                <img class="imgmod my-4" src="pics/cv-1.png"/>
                                <h4 class="text-3xl mb-2 font-semibold">Production</h4> 
                                <div class="flex flex-col items-start justify-center">                                
                                    <ul class="desc text-sm md:text-xl">
                                        <li class="list-disc">HTML/CSS/JS</li>
                                        <li class="list-disc">Site responsive</li>
                                        <li class="list-disc">Github</li>
                                    </ul>
                                </div>                        
                            </div>
                            <div class="flex flex-col justify-between items-center lg:w-1/2">                                    
                            <img class="imgmod my-4" src="pics/cv-2.png"/>
                            <h4 class="text-3xl mb-2 font-semibold">Infos</h4>
                            <div class="desc text-left sm:mx-16 lg:my-0 lg:mx-20 text-sm md:text-xl">
                                lorem ipsum
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col justify-center items-center bg-gray-200 mt-4 p-2 hover:bg-gray-400 cursor-pointer">
                        <a href="#" target="_blank" class="text-xl">Visiter le site</a>
                    </div>
                </div>            
            </div>
    </body>

    Code JavaScript : 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
    //Modal
    const clik = document.getElementsByClassName('trans');
    const modal = document.getElementsByClassName('modal');
    const closed = document.getElementsByClassName('closed');
    const dark = document.getElementById('dark');
     
     
     
    for(let i=0; i<clik.length; i++){
        clik[i].addEventListener('click',function(){
            console.log("index : "+i);
            modal[i].style.display = 'block';
            dark.style.display= 'block';
        })    
    }
     
     
    for(let i=0; i<closed.length; i++){
        closed[i].addEventListener('click',function(){
            console.log("index : "+i);
            modal[i].style.display = 'none';
            dark.style.display = 'none';
        })    
    }

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    .modale{
        animation: fadeIn ease 2s;
    }
    .modal{
        top: 150rem;
    }
    bon ca reste du bricolage... ca marche pour le moment, mais j'imagine qu'il doit y avoir une solution plus fonctionnel et surtout plus conventionnelle pour faire ce genre de chose ?

  6. #6
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    mars 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2008
    Messages : 1 718
    Points : 2 463
    Points
    2 463
    Par défaut
    Bonjour,

    J'avoue que je n'ai pas envie de m'amuser à copier/coller le code à nouveau si ça semble fonctionner

    La seule chose que je changerais, c'est que je refactorisais le code Javascript pour être plus souple.
    Actuellement, votre code fait des boucles alors que chaque click ne peut ouvrir/fermer qu'une seule modal car elle est écrite en dur dans le code (c'est l'utilisation de la variable dark)
    Normalement, on utiliserait un attribut data dans le bouton, ou une balise <a> avec l'attribut href.
    Ca permettrait d'ouvrir autant de modal différente qu'on souhaite, tout ça avec le même code.

    Je souhaite également rebondir sur cette phrase :
    la modale apparait en haut de la page et pas à l'endroit ou l'utilisateur clique
    Il n'existe pas de propriété CSS qui permet de dire "positionne toi sur le curseur au moment du click" donc il est évident que ce comportement ne se produira pas
    Le développement ce n'est pas de la magie, bien que l'utilisation d'un framework avec 3 millions de classes en donne l'impression.
    Si ce n'est pas codé que la modal doit apparaitre là où le click a eu lieu, ça n'arrivera pas.

    Cependant, c'est un comportement très étrange qui est décrit et je ne comprends pas l'intérêt donc je n'irai pas plus loin concernant ce sujet

Discussions similaires

  1. Un DIV qui ne prend pas toute la hauteur du body (100%)
    Par amateurprg dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 25/10/2019, 16h10
  2. Macro qui ne prend pas en compte toutes les valeurs d'un tableau
    Par bentor22 dans le forum Macros et VBA Excel
    Réponses: 0
    Dernier message: 29/01/2013, 11h27
  3. ListView qui ne prend pas toute la place qu'il faut.
    Par ABandApart dans le forum Composants graphiques
    Réponses: 6
    Dernier message: 23/07/2011, 20h52
  4. Un JPanel qui ne prend pas toute ma JFrame
    Par Bartimeus dans le forum Agents de placement/Fenêtres
    Réponses: 2
    Dernier message: 26/01/2010, 22h47
  5. Div qui ne prend pas toute la largeur
    Par kidseb dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 12/09/2008, 20h18

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