Как сделать положение модального окна статическим при масштабировании или изменении размера экрана
Сайт (написанный на React с использованием Typescript и Tailwind) имеет модальное окно. Модальный реализован с использованием библиотеки «react-modal» https://reactcommunity.org/react-modal/ .
При стандартных размерах окон браузера проблем с модальным окном не возникает. Однако если пользователь изменяет размер окна или масштабирует его, модальное окно перемещается относительно своего родительского компонента.
Мне бы хотелось, чтобы окно модели оставалось статичным по отношению к родительскому компоненту (и, соответственно, по отношению ко всей странице) независимо от масштаба или размера экрана.
РодительскийКомпонент.tsx
const ParentComponent = () => {
return (
<>
<button
onClick = {...} >
<Icon/>
</button>
<ModalWindow/>
</>
)
}
Модальное окно.tsx
const ModalWindow = () => {
return (
<ReactModal
ariaHideApp = {false}
isOpen = {...}
onRequestClose = {() => {...}}
style = {{
overlay: {
backgroundColor: 'transparent',
},
content: {
outline: 'none',
},
}}
className = {clsxm(
'absolute top-[50px] right-[-50px] h-[50px] w-[50px] translate-x-[-50%] translate-y-[-50%] focus:outline-none'
)}
>
</ReactModal>
);
};
Но когда я открываю окна на весь экран или применяю масштабирование больше/меньше 100%, модальное окно меняет свое положение относительно родительского компонента.
Я хотел бы сделать это таким образом, чтобы модальное окно не меняло свое положение относительно родительского компонента.
Ответы 3
попробуйте установить относительное положение родительского элемента
const ParentComponent = () => {
return (
<div className = {clsxm('relative')}>
<button
onClick = {...} >
<Icon/>
</button>
<ModalWindow/>
</div>
)
}
Когда вы указываете верхнее и правое ограничения элемента, имеющего абсолютное позиционирование, этот элемент всегда будет сохранять указанное пространство от своего родителя.
В вашем случае вы установили [top-50px] и [right-50px] абсолютно позиционированного элемента. Поэтому этот элемент будет заботиться только о верхнем и правом пространстве.
Чтобы сделать его статическим, вам необходимо указать его положение по обеим осям. Горизонтальные, а также вертикальные. вы можете сделать что-то вроде этого:
const ModalWindow = () => {
return (
<ReactModal
ariaHideApp = {false}
isOpen = {...}
onRequestClose = {() => {...}}
style = {{
overlay: {
backgroundColor: 'transparent',
},
content: {
outline: 'none',
},
}}
className = {clsxm(
'absolute top-[50px] right-[-50px] left-[50px] bottom-[50px] h-[50px] w-[50px] translate-x-[-50%] translate-y-[-50%] focus:outline-none'
)}
>
</ReactModal>
);
};Чтобы position: absolute учитывал позицию родителя, вы можете установить для позиции родителя значение relative.
position: absolute позиционирует ваш элемент относительно первого родительского элемента, позиция которого отличается от статической.
На ваш вопрос уже был дан ответ здесь
Приведите минимальный воспроизводимый пример проблемы.