Question

在社区的帮助下，我终于可以在我的度假网站上使用我的模式弹出窗口进行工作了。

模态代码如下：

import React from "react";
import '../../assets/styles/GenericTheme.css'
import { Modal, Button } from "react-bootstrap";

class LoginRegisterModal extends React.Component {  
    constructor(props, context) {
        super(props);
        this.state = {show: false};
    }
      
    open = () => {
        this.setState({show: true});
    }
    
    close = () => {
        this.setState({show: false});
    }

    componentDidUpdate(prevProps) {
        const { show } = this.props;
        if (prevProps.show !== show) {
          if (show) {
            this.open(); // open if parent says to
          } else {
            this.close(); // close if parent says to
          }
        }
      }
      
    render() {  
        const styleModal = {
            width:770,
            height:480,
            backgroundColor:"#ffffffff",
            borderRadius:21.5,
            boxShadow: "0px 8px 18px 0 rgba(0,0,0,0.14)",
        }
        return (         
        <Modal show={this.state.show} style={styleModal} >
            <Modal.Body>test</Modal.Body>
            <Modal.Footer>
            <Button variant="secondary" onClick={this.close}>
              Close
            </Button>
          </Modal.Footer>
        </Modal>
        );  
    }  
}  
  
export default LoginRegisterModal;

该模式由react-bootstrap Navs组件调用：

const menuLoginRegister = <Nav.Link ref="LoginRegisterModal" eventKey={1} href="#" onClick={this.openLogin}>{TextContents.MenuLoginRegister}</Nav.Link>;

我已经在返回函数中添加了模态，如下所示：

return (
            <div>
            <Navbar className="village-header" width="100" expand="lg">
                ....
            </Navbar>
            <LoginRegisterModal show={this.state.showLogin} 
              onHide={() => this.setState({ showLogin: false })}/>
            </div>
            );

唯一的问题是模态始终显示在左上角，而不是在屏幕中央。我尝试使用该样式的中心，但仍然无法将其移动到中心。

任何想法怎么做？谢谢

反应模态未显示在屏幕中央

0 个答案: