Модальное окно отображается неправильно

Question

Я пытаюсь правильно открыть модальное окно. Я использую reactstrap. В настоящее время при нажатии кнопки для ее отображения она отображается внизу:

Также модальная кнопка закрытия находится как-то внизу модальный заголовок. Я хотел, чтобы модальное окно открывалось в середине страницы и затемняло фон. То же самое происходит в другом модальном окне, которое также отображается на этой странице (как только кто-то нажимает кнопку добавления растения, у него есть возможность просмотреть или удалить, а удаление также является модальным). Модальное окно удаления делает то же самое:

Я не думаю, что это имеет какое-либо отношение к этому, но добавление нового растения включено свой собственный компонент и привязан к родительскому компоненту приложения. Удаление находится в том же компоненте. Всплывающая форма относится к компоненту, который я назвал 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;

Кстати, я использую стилизованные компоненты для стилизации некоторых вещей на странице, поэтому некоторые теги выглядят странно.

Answer 1

Мне практически не хватало импорта в моих приложениях Js. Мне просто нужно было добавить:

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

Как только я это сделал, модальное окно заработало так, как я хотел!

Answer 2

Это вполне нормальное желание! Вот рецепт, которому все следуют:

1. Вам понадобится фоновый div в качестве родителя самого модального окна, который занимает всю высоту и ширину страницы. Сделайте его черным с некоторой непрозрачностью, чтобы получить эффект затемнения. (Обратите внимание, что вы, вероятно, захотите сделать что-то вроде background-color: rgba(0, 0, 0, 0.7) вместо того, чтобы придавать непрозрачность самому фону, чтобы модальное окно не было прозрачным.)
2. Чтобы центрировать модальное окно, следуйте этому классу c совет: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
3. Чтобы кнопка закрытия правильно располагалась в вашем заголовке, попробуйте сделать заголовок position:relative (чтобы вы могли расположить его дочерние элементы абсолютно относительно него) и кнопка закрытия position: absolute, возможно right: 0; top: 0 или как хотите.