I designed a modal window that has a fixed position:
<div className={classes['UIModal'] + ' ' + classes[transition]}
onClick={() => dispatch(modalHandler('offer'))}
>
<div className={classes['UIModal__container'] + ' ' + classes[transition]}
onClick={e => e.stopPropagation()}
>
content
</div>
</div>
UIModal -> backdrop covering the entire viewport
UIModal_container -> box containing the modal content
.UIModal{
background: rgba(0, 0, 0, 0.66);
height: 100vh;
width: 100vw;
position: fixed;
top:0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
&__container{
background: #171717;
padding: 10px 50px;
border-radius: 20px;
border: 3px solid white;
box-shadow: 1px 1px 50px #833AB4;
}
}
You can test it out by clicking the "Consultation" button and typing on a mobile phone: source
P.S. I make use of the npm package "disable-scroll" when any modals are open:
const {offer, consultation} = useAppSelector(state => state.modalReducer)
useEffect(() => {
offer || consultation ? disableScroll.on() : disableScroll.off()
}, [offer, consultation])