Привет, поэтому я использую компонент портала, который выглядит следующим образом, который используется для создания "модалов"
export const ModalWindow = (props: RenderableProps<Props>) => {
if (!props.display) {
return null;
}
return (
<Portal parentNode={props.parentNode} renderOnMount={true}>
<div id='modal' className={props.largeModal ? 'modal-large' : 'modal-small'}>
{props.children}
</div>
</Portal>
)
}
Тогда у меня есть этот компонент, который я затем рендерил внутри этого модального
export const ShowInformation = (props: RenderableProps<Props>) => {
return (
<div className='blur-out-menu'>
<div className='information-content'>
<span className='information-title'>Show Information?</span>
<span className='information-text'>Click check button to show information</span>
<div className='button-section'>
<div className='decline-button' onClick={() => props.onShow(false)}>
<CancelButton />
</div>
<div className='check-button' onClick={() => props.onShow(true)}>
<CheckButton />
</div>
</div>
</div>
</div>
);
};
, что здесь важно, это blur-out-menu, который я просто хочу использовать для размытия всего, кроме модального, но я не могу понять, либо он просто покрывает ту же область, что и модальный, либо, если я установил фиксированное положение, он испортил его полностью и ничего внутри модал не держит на месте. Есть ли хороший способ сделать это?
здесь css для blur-out-menu
.blur-out-menu {
background-color: rgba(0, 0, 0, 0.25);
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 4;
}
модал получил z-index 5, так что он выше этого размытия
вот модал css, а также
.modal-small {
background-color: #1E2933;
top: 25%;
left: 5%;
width: 90%;
height: 30%;
border-radius: 10px;
z-index: 5;
}