Modale qui suit le scroll
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:
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:
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:
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;
}
} |
