banquise/website-front
7
0
Fork 0
Code Issues 3 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Fix scroll on popup

Browse Source
This commit is contained in:
sahamone 2025-06-02 20:10:32 +02:00
parent 7bc4f48f11
commit 613d792cbe
1 changed files with 117 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
banquise-website/src/components/ui/Popup.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { useEffect } from 'react';
import { URLS } from '../../config/constants'; import { URLS } from '../../config/constants';
interface Service { interface Service {
@ -15,7 +15,17 @@ interface PopupProps {
onClose: () => void; onClose: () => void;
} }
export const Popup: React.FC<PopupProps> = ({ service, onClose }) => ( export const Popup: React.FC<PopupProps> = ({ service, onClose }) => {
// Empêcher le scroll du body quand la popup est ouverte
useEffect(() => {
document.body.style.overflow = 'hidden';
return () => {
document.body.style.overflow = 'unset';
};
}, []);
return (
<div className="fixed inset-0 bg-black/60 flex justify-center items-center z-50 p-4 backdrop-blur-md animate-fadeIn"> <div className="fixed inset-0 bg-black/60 flex justify-center items-center z-50 p-4 backdrop-blur-md animate-fadeIn">
<div className="bg-white text-banquise-blue-dark rounded-3xl max-w-4xl w-full max-h-[90vh] shadow-2xl relative animate-slideUp border border-banquise-blue-lightest/20 overflow-hidden"> <div className="bg-white text-banquise-blue-dark rounded-3xl max-w-4xl w-full max-h-[90vh] shadow-2xl relative animate-slideUp border border-banquise-blue-lightest/20 overflow-hidden">
@ -127,4 +137,5 @@ export const Popup: React.FC<PopupProps> = ({ service, onClose }) => (
<div className="absolute bottom-0 left-0 w-12 h-12 sm:w-16 sm:h-16 lg:w-24 lg:h-24 bg-banquise-blue/5 rounded-full translate-y-6 -translate-x-6 sm:translate-y-8 sm:-translate-x-8 lg:translate-y-12 lg:-translate-x-12 hidden sm:block pointer-events-none"></div> <div className="absolute bottom-0 left-0 w-12 h-12 sm:w-16 sm:h-16 lg:w-24 lg:h-24 bg-banquise-blue/5 rounded-full translate-y-6 -translate-x-6 sm:translate-y-8 sm:-translate-x-8 lg:translate-y-12 lg:-translate-x-12 hidden sm:block pointer-events-none"></div>
</div> </div>
</div> </div>
); );
};