Discussion :

[d3LTa7]

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 !!

[darkstar123456]

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 !)

[d3LTa7]

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

[darkstar123456]

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

[d3LTa7]

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 ?

[darkstar123456]

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