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