Bonsoir,

J'ai des pop-up qui s'ouvrent sur mon site (pour des formulaires d'authentification ou autres), et j'aimerais que lorsque ce pop-up s'ouvre (quand la classe "open" est présente) cela bloque le scroll du site.

J'ai tenté cela mais le scroll ne s'en va pas.

.form-popup-div{
	/* opacity: 0; */
	visibility: hidden;
	z-index: -1;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(3px);
	/* transition: all 0.5s ease; */
}
.form-popup-div.open{
	/* opacity: 1; */
	visibility: visible;
	z-index: 3;
	overflow-y: hidden !important;
}

Étant donné le nombre de formulaire présent sur mon site, il serait très long et compliqué de mettre cela en place via JS, d'où le fait que je recherche une solution CSS.

Merci d'avance pour votre aide.

Bonjour,

la seule possibilité que je voie demande un peu de JS - et de toute façon tu en as besoin pour ouvrir ta pop-up, non ? Tu peux mettre une classe, genre "popup-open" sur body, et tu lui donnes overflow: hidden.

En effet j'ai du JS pour ouvrir le pop-up, et j'avais déjà pensé à la classe à rajouter sur le body. Le problème, c'est que ça me demande de recheck tous mon code pour ajouter cette ligne de JS à tous les formulaires. En soi ce n'est pas compliqué mais extrêmement chronophage pour pas grand-chose, d'où le fait que je cherchais une solution CSS.

Le JS qui ouvre la popup, c'est une fonction que tu définis une fois et appelle de partout ? Ou bien c'est "juste" ajouter la classe "open" sur la popup ? Si c'est le premier cas, tu peux ajouter la classe sur body dans le même mouvement.

Nan justement, je pensais pas avoir autant de formulaire que ca au début, du coup j'ai pas une seul fonction défini mais plein de petite ligne classlist.add("open") partout dans mon code .

Ça vaut peut-être le coup de créer ladite fonction, comme ça c'est fait, et ça sera plus simple pour la maintenance

Oui je pense que je vais procéder ainsi, ça va être long mais il le faut.

Courage !