HTML CSS 模态：固定位置不起作用

Question

我正在尝试创建模态框我给了背景组件 position:fixed 仍然是从切换按钮开始的

当 position:fixed 处于活动状态时：

当 position:fixed 未激活时：

const Background = styled.div`
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
`;

 <div>
      {' '}
      {showModal ? (
        <Background>
          <ModalWrapper showModal={showModal}>
            <ModalImg src={require('./modal.jpg')} alt='camera' />
            <ModalContent>
              <h1>Are you ready?</h1>
              <p>Get exclusive access to our next launch.</p>
              <button>Join Now</button>
            </ModalContent>
            <CloseModalButton
              aria-label='Close modal'
              onClick={() => setShowModal((prev) => !prev)}
            />
          </ModalWrapper>
        </Background>
      ) : null}
    <div/>

Answer 1

最后一段代码中使用的标签 wrapper/parent 不是风格中立的，它有一些默认的风格导致了这样的问题。

替换为 <>

 <>
      {' '}
      {showModal ? (
        <Background>
          <ModalWrapper showModal={showModal}>
            <ModalImg src={require('./modal.jpg')} alt='camera' />
            <ModalContent>
              <h1>Are you ready?</h1>
              <p>Get exclusive access to our next launch.</p>
              <button>Join Now</button>
            </ModalContent>
            <CloseModalButton
              aria-label='Close modal'
              onClick={() => setShowModal((prev) => !prev)}
            />
          </ModalWrapper>
        </Background>
      ) : null}
    </>

现在一切正常！

HTML CSS 模态：固定位置不起作用

HTML CSS Modal: Position fixed not working

html

javascript

css

modal-dialog

reactjs