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; } }
Partager