模态显示不正确

Question

我正在尝试让我的模式正确弹出。我正在使用反应带。目前，当按下按钮使其显示时，它会显示在底部：

此外，关闭模式按钮以某种方式位于模式的底部 header。我希望模式在页面中间打开并使背景变暗。同样的事情发生在另一个也呈现在这个页面上的模态上（一旦有人点击添加植物，它就有一个查看或删除的选项，删除也是一个模态）。删除模态正在做同样的事情：

我认为这与它没有任何关系，但添加新工厂是在它自己的组件上，并且与 parent 应用程序组件相关联。删除是在同一个组件上。弹出的表单位于我命名为 plantform 的组件上，这里是其中的一些代码：

const PlantForm = props => {
    const [plant, setPlant] = useState({
        id: props.number,
        nickname:"",
        species: "",
        h2oFrequency: ""
    })

  
    const changeHandler = (event) => {
        setPlant({
            ...plant,
            [event.target.name] : event.target.value
        })
    }

 

    return(
        <Modal isOpen={props.modalProp} toggle={props.modalToggle} style={{width: "40%", marginLeft:"34%"}}>
            <ModalHeader toggle={props.modalToggle} style={{background: "linear-gradient(to right, #81814D, #687158)", textAlign:"center"}}>Add Plant</ModalHeader>
            <ModalBody style={{padding: "15px", border:"1px solid #C7BEAE", background: "linear-gradient(to right, #81814D, #687158)"}}>
                <Form onSubmit={event =>{
                    event.preventDefault()
                    props.addPlant(plant)

                    setPlant({id: "", nickname:"", species: "", h2oFrequency: ""})
                    props.setNumber(props.number+1)
                    props.modalToggle()
                }} >
                    <div className="addPlant">
                        <Title>Add a New Plant</Title>
                    </div>
                    <Label htmlFor="nickname">Nickname your Plant: </Label>
                    <Input
                        id="nickname"
                        type="text"
                        name="nickname"
                        placeholder="Enter your plant's nickname"
                        value={plant.nickname}
                        onChange={changeHandler}
                        />
                    <Label htmlFor="species">Enter your Plant's Species: </Label>
                    <Input
                        id="species"
                        type="text"
                        name="species"
                        placeholder="Enter your plant's nickname"
                        value={plant.species}
                        onChange={changeHandler}
                        />
                    <Label htmlFor="h2o">Select your Water Schedule:</Label>
                    <Select
                        id="h2o"
                        name="h2oFrequency"
                        value={plant.h2oFrequency}
                        onChange={changeHandler}
                        >
                        <option value="" disabled={true}>Select Your Water Schedule</option>
                        <option value="Daily">Daily</option>
                        <option value="Weekly">Weekly</option>
                        <option value="Bi-Weekly">Bi-Weekly</option>
                        <option value="Monthly">Monthly</option>
                    </Select> 
                    <Button type="submit">Add Plant</Button>
                </Form>
            </ModalBody>
          </Modal>
    )
}

export default PlantForm;

这是同一组件上删除模式的代码：

const PlantList = props => {

    const [modal, setModal]= useState(false);
    const toggle = () => setModal(!modal);

    const [plants] = useState([])
    
    
    const [plantId, setPlantId] = useState("");
    const openDeleteModal = (id)=> {
        setPlantId(id)
        toggle()
    }
    const deletePlant=() => {
        props.setPlants(props.plants.filter(plant=> plant.id!==plantId))
        setPlantId("")
        toggle()
    }
   console.log(plants)
    return(
        <div>
            <div>
                <Title>List of Plants</Title>
            </div>
            <PlantDiv>
                <Modal isOpen={modal} toggle={toggle} style={{width: "20%", marginLeft:"40%"}}>
                        <ModalBody style={{padding: "15px", border:"1px solid #C7BEAE", background: "linear-gradient(to right, #81814D, #687158)"}}>
                            <ModalPara>Would you like to delete? </ModalPara>
                        </ModalBody>
                        <ModalFooter style={{padding: "15px", border:"1px solid #C7BEAE", background: "linear-gradient(to right, #81814D, #687158)"}}>
                            <Button onClick={deletePlant}>Yes</Button>
                            <Button onClick={toggle}>No</Button>
                        </ModalFooter>
                    </Modal>
            {props.plants.map(plant =>
                <Card key={plant.id}>
                    <Para>Plant Nickname: {plant.nickname}</Para>
                    <Para>Plant Species: {plant.species}</Para>
                    <Para>Water Frequency: {plant.h2oFrequency}</Para>
                    <Link to={`/editplant/${plant.id}`}>
                    <Button>View</Button>
                    </Link>
                    <Button onClick={()=>openDeleteModal(plant.id)}>Delete</Button>
                    
                </Card>
                )}
                </PlantDiv>
                <Button onClick={props.plantToggle}>Add Plant</Button>
                
        </div>
    )
}

export default PlantList;

附带说明一下，我使用 styled-components 为页面上的某些内容设置样式，这就是为什么某些标签看起来很奇怪的原因。

Answer 1

这是很正常的想要的东西！这是每个人都遵循的食谱：

您需要一个背景 div 作为模态本身的父级，它占据页面的整个高度和宽度。使它变黑并增加一些不透明度，这样它就有了 'dimming' 的效果。（请注意，您可能想要做类似 background-color: rgba(0, 0, 0, 0.7) 的操作，而不是给背景本身设置不透明度，这样模态框就不透明了。）
要使模态居中，请遵循以下经典建议： https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
要让关闭按钮在您的页眉中正确定位，请尝试制作页眉 position:relative（以便您可以相对于它绝对定位其子项）和关闭按钮 position: absolute，可能right: 0; top: 0 或根据需要。

Answer 2

我的 Apps Js 基本上缺少导入。我只需要添加：

import "bootstrap/dist/css/bootstrap.min.css";

一旦我这样做了，模态就按照我想要的方式工作了！

模态显示不正确

Modal isn't showing properly

javascript

reactjs

styled-components

reactstrap