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

//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';
    })    
}

.modale{
    animation: fadeIn ease 2s;
}
.modal{
    top: 150rem;
    left: 0;
}

@keyframes fadeIn {
    0% {
        opacity:0;
        right: -200px;
    }
    100% {
        opacity:1;
        right: 0px;
    }
}

-
Edité par d3LTa7 3 septembre 2021 à 14:11:20

Bonjour d3LTa7,

J'ai réussi à faire ce dont tu avais besoin avec la position fixe, il aurait été intéressant que tu nous partages le style que tu avais essayé avec cette position pour qu'on puisse voir ce qui n'allait pas mais comme ton scss était assez mince je te propose le fichier de style suivant :

body{
    height: 400vh;

    .modale{
        animation: fadeIn ease 2s;
        left: 50%;
        position: fixed;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
    }
    .modal{
        top: 150rem;
        left: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity:0;
        right: -200px;
    }
    100% {
        opacity:1;
        right: 0px;
    }
}

Et donc tu n'as pas besoin de javascript pour faire ça.

-
Edité par NicolasMarafetti 4 septembre 2021 à 16:37:28

Merci d'avoir pris le temps de me répondre

La plupart du style de la modale est dans l'index car je code avec Tailwind qui est un framework plus ou moins identique à Bootstrap ! Donc mon Scss concernant ma modale ne se résume qu'à cela ! Ou alors j'ai pas compris ce que tu voulais...

Cependant, il est vrai que je n'ai pas mis l'endroit ou l'on clique pour ouvrir la modale, et qui fait appelle au JS :

        <section id="portfo" class="portfolio col-span-6 grid grid-cols-6 justify-center bg-gray-100 py-24 px-4">
            <h2 class="col-span-6 justify-self-center mb-2 text-3xl font-bold z-10 lg:text-4xl">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="text-xl col-span-6 text-center">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores labore iure excepturi, obcaecati veritatis expedita qui culpa sit quidem blanditiis pariatur, quibusdam doloribus tempora sequi ipsam? Optio vero reiciendis harum.</p>
            </div>                        
            <div class="pf__cv col-span-3 flex flex-col items-center justify-evenly mx-2 my-2 sm:mx-8 sm:my-4">
                <h3 class="font-bold text-xl text-center h-14 flex items-center sm:h-8 lg:text-2xl sm:mb-4">CV</h3>
                <img class="pf__cv--img trans" src="pics/vanilla-cv.png"/>     
            </div>                    
        </section>

En tout cas j'ai testé ta solution mais ça ne marche pas chez moi !!

Mais je pense avoir besoin de JS pour ouvrir ou fermer la modal !! De plus j'aimerais avoir la possibilité de la fermer avec la croix ou en cliquant en dehors ou en appuyant sur échap ... Mais ca c'est une autre histoire ! Je veux déjà pourvoir l'ouvrir en cliquant sur l'image et qu'elle soit centré sur l’écran même si l'utilisateur scroll en haut ou en bas

Entre temps j'ai fait une rectif sur le scss :

.modal{
    animation: fadeIn ease 2s;
    top: 150rem;
    left: 0;
}


@keyframes fadeIn {
    0% {
        opacity:0;
        right: -200px;
    }
    100% {
        opacity:1;
        right: 0px;
    }
}

-
Edité par d3LTa7 4 septembre 2021 à 20:10:20