Question

您好，所以我使用了一个门户组件，它看起来像这样，用于创建“模态”

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
这应该是技巧。

渲染模态/组件时，我希望背景具有深色

1 个答案: