Modale qui suit le scroll

**d3LTa7** · 04/09/2021, 15h07

Bonjour !
Petit souci avec mes modales qui sont en position absolute et que j'aimerais qu'elles suivent le scroll... Enfin qu'elle reste toujours au centre ! J'ai essayé en position fixed mais elle disparait :/

Il y a plusieurs modales identique, d’où la boucle en JS, mais pour ma question je n'en ai mis qu'une.

Je travail avec Tailwind

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
       <section>
            <div class="modal h-full w-full hidden z-30 absolute">
                <div class="flex flex-col items-center justify-center bg-white m-14">
                    <div class="closed cursor-pointer flex flex-row justify-end w-full mr-4 mt-2">
                        <svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="30px" height="30px"><path d="M 7.71875 6.28125 L 6.28125 7.71875 L 23.5625 25 L 6.28125 42.28125 L 7.71875 43.71875 L 25 26.4375 L 42.28125 43.71875 L 43.71875 42.28125 L 26.4375 25 L 43.71875 7.71875 L 42.28125 6.28125 L 25 23.5625 Z"/></svg>
                    </div>
                    <div class="modale  flex flex-col lg:m-16 p-6">
                        <div class="modTitle flex flex-row justify-center items-center">
                            <h3 class="text-3xl text-center font-bold">Mon CV<h3>                       
                        </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="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 sm:text-base 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="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-8 text-sm md:text-xl">
                                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae asperiores voluptatum impedit excepturi unde tempore atque ab, sunt voluptas ducimus! Nihil iure doloribus quibusdam culpa, dolorem laborum delectus facilis corrupti.
                                </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>           
            </div>
</section>

js :

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
//Modal
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("indexx : "+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';
    })   
}

scss :

Code CSS :

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
.modale{
    animation: fadeIn ease 2s;
}
.modal{
    top: 150rem;
    left: 0;
}
@keyframes fadeIn {
    0% {
        opacity:0;
        right: -200px;
    }
    100% {
        opacity:1;
        right: 0px;
    }
}

**Loralina** · 05/09/2021, 17h58

Bonjour,

Envoyé par d3LTa7

J'ai essayé en position fixed mais elle disparait

position:fixed; seul ne suffit pas.
Exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<style>
.milieuFixe {
        position:fixed;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
}
</style>
<div style="height:4000px;"></div>
<div class="milieuFixe" style="background-color:#666666;width:400px;height:300px;"></div>

**d3LTa7** · 06/09/2021, 13h26

J'avais déjà tenté avec ces config là, mais ca ne marche toujours pas... Voila les changements par rapport à mon précédent code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.modal{
    animation: fadeIn ease 2s;
    top: 50%;
    left: 50%;
    position: fixed;
    transform: translate(-50%, 50%);
}

et juste supprimé le "absolute" de la liste des classes de la première div dans mon index.php

**Loralina** · 06/09/2021, 15h01

Bonjour,
Sur le deuxième pourcentage : transform: translate(-50%, 50%); : mettre -50% et non 50%.
Sinon, j'ai copié-collé les codes et ajouté un bouton d'ouverture, et pour moi ça marche :

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<style>
.modale{
    animation: fadeIn ease 2s;
}
@keyframes fadeIn {
    0% {
        opacity:0;
        right: -200px;
    }
    100% {
        opacity:1;
        right: 0px;
    }
}
.modal{
    animation: fadeIn ease 2s;
    top: 50%;
    left: 50%;
    position: fixed;
    transform: translate(-50%,-50%);
}
</style>
<button class="trans" style="margin:500px 0px 2000px 0px;">Ouvrir</button>
<section>
	<div class="modal h-full w-full hidden z-30">
		<div class="flex flex-col items-center justify-center bg-white m-14">
			<div class="closed cursor-pointer flex flex-row justify-end w-full mr-4 mt-2">
				<svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="30px" height="30px"><path d="M 7.71875 6.28125 L 6.28125 7.71875 L 23.5625 25 L 6.28125 42.28125 L 7.71875 43.71875 L 25 26.4375 L 42.28125 43.71875 L 43.71875 42.28125 L 26.4375 25 L 43.71875 7.71875 L 42.28125 6.28125 L 25 23.5625 Z"/></svg>
			</div>
			<div class="modale  flex flex-col lg:m-16 p-6">
				<div class="modTitle flex flex-row justify-center items-center">
					<h3 class="text-3xl text-center font-bold">Mon CV<h3>                       
				</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="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 sm:text-base 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="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-8 text-sm md:text-xl">
							Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae asperiores voluptatum impedit excepturi unde tempore atque ab, sunt voluptas ducimus! Nihil iure doloribus quibusdam culpa, dolorem laborum delectus facilis corrupti.
						</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>           
	</div>
</section>
<script>
//Modal
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("indexx : "+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';
    })   
}
</script>

Tu peux tester tel quel ce code.
S'il fonctionne pour toi, alors il y a probablement un autre problème ailleurs.
Dans ce cas, essaie de nous donner directement un code de test montrant le problème et copiable-collable en une seule fois (ne pas séparer le CSS, le script etc.).

**d3LTa7** · 08/09/2021, 17h24

Super ça marche nikel !! Je crois que le souci venait aussi d’ailleurs du coup !!

Modale qui suit le scroll

JavaScript

Discussions similaires

Partager

Partager