当渲染模态/组件时，我希望背景是深色的

Question

你好，所以我使用了一个门户组件，它看起来像这样，用于创建"modals">

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，我只想用它来模糊除模态之外的所有东西，但我无法弄清楚它要么只覆盖了与模态相同的区域，要么如果我固定了位置，它会把它完全弄乱，模态内部没有任何东西保持原位。有什么好方法吗？

这是blur-out-menu的css

.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索引5，所以它在这个模糊之上

这是模态css以及

.modal-small {
background-color: #1E2933;
top: 25%;
left: 5%;
width: 90%;
height: 30%;
border-radius: 10px;
z-index: 5;
}

Answer 1

在.blur-out-menu中将height属性更改为100vh，将width属性更改为100vw
这应该是诀窍。