时间戳

首页 > 解决方案 > 即使我更改了模态体的位置，为什么会看到一个白框？

react-bootstrap4-modal - 即使我更改了模态体的位置，为什么会看到一个白框？

问题描述

我使用 react bootstrap 在页面加载时显示一个弹出窗口。我想用顺风 css 改变盒子的位置，位置正在改变，但屏幕上有一个白色的盒子。你能帮我如何删除它吗？ 在此处输入图像描述

import React,{useState} from 'react';
import {Modal} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const Popup = () => {
    const [show, setShow] = useState(true);
    const handleClose = () => setShow(false);
  
  return (
    <>
      

      <Modal show={show} onHide={handleClose}>
        <Modal.Body className="bg-black absolute top-44"><input className="pl-2 py-1" placeholder="search..."/></Modal.Body>
      </Modal>
    </>
  );
}

export default Popup

标签： react-bootstrap4-modal

解决方案

它将显示，因为您正在应用 top:44px 的绝对位置，您可以使用边距，然后如果您不需要白框，它将显示在白框内，然后您必须从 .modal-content 类中删除默认背景颜色。

推荐阅读