Question

我在我的应用中使用react-modal，但我无法在当前屏幕内容的基础上轻松渲染它。模态始终呈现在屏幕的底部（甚至在html主体下方）。

这是我的自定义模式：

import Modal from 'react-modal';

var SimpleModal = React.createClass({
    render() {
        return (
                <Modal
                    isOpen={this.props.isOpen}
                    className="modal-content"    
                    contentLabel="modal"
                    onRequestClose={this.props.onClose} >
                    <h1 className="modal-header">{this.props.title}</h1>
                    <div className="modal-body">
                        <p>{this.props.message}</p>
                    </div>

                    <Button bsStyle={this.props.type} className="modal-button" onClick={this.props.closeModal}>Close</Button>

                </Modal>
        )
    }
});

const mapStateToProps = (state) => {
    return {
        isOpen: state.modals.notification.isOpen,
        type: state.modals.notification.type,
        title: state.modals.notification.title,
        message: state.modals.notification.message,
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        closeModal: () => dispatch(skjeraActionCreators.closeNotificationModal()),
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(SimpleModal)

SimpleModal组件包含在我的顶级容器（AppContainer）的render函数中，如下所示：

render() {
        return (
            <div>
                <SimpleModal />
                <App
                    onLogout={this.logout}
                    isLoggedIn={this.props.isLoggedIn}
                    username={this.props.username}
                    subpages={this.props.children}
                />
            </div>   
       )  
    }

请注意，我还没有调整样式/ css，因此它使用默认样式，因此使用默认定位方案。

任何人都可以帮我追踪这个错误吗？任何帮助将不胜感激。

编辑：这是CSS条目（可能是那里的一些还原元素）我在我的代码中提到过：

.modal-header {
    background-color: inherit;
    border: none;
}

.modal-body {
    padding-top: 10px;
    padding-bottom: 10px;
}

.modal-button {
    padding-left: 10%;
    margin-left: 20px;
}
.modal-content {
    position: absolute;
    background-color: white;
    color: black;
    top: auto;
    bottom: auto;
    overflow: auto;
    right: auto;
    left: 10px;
    border-radius: 20px;
    outline: none;
    border: solid;
    border-width: medium;
    border-color: black;
    padding-bottom: 10px;
}

react-modal呈现在屏幕的底部

0 个答案: