React-Modal无法设置位置

Question

我正在使用react- Modal，但是我找不到任何方法来成功地设置Modal的位置。我在网上使用了内联样式，但它们没有任何效果。我正在做我在react-modal站点上的codepen示例中看到的工作，但它在我的应用程序中不起作用。有些东西很明显是不同的，但我看不出是什么。

这就是我渲染Modal的方式：

render: function() {
    return (
      <Modal
        bsSize={this.props.size}
        aria-labelledby="contained-modal-title-lg"
        show={this.props.show}
        style={{ content : {top: '70%'}}}
        onHide={this.hideModal}>
        <Modal.Header>
          <Modal.Title id="contained-modal-title-lg">{this.props.modalTitle}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {this.props.modalBody || this.modalBody}
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.hideModal}>Cancel</Button>
          <Button bsStyle="primary" onClick={this.props.modalCallback}>{this.props.confirmButtonText}</Button>
        </Modal.Footer>
      </Modal>
    );

我已经为style属性尝试了许多不同的值，但我设置的任何值都无效。我也尝试过不使用bsSize属性，但也不起作用。我只需要内容的顶部边框稍微低一点，因为它是在同一位置上的另一个模式打开，我希望它在视觉上是明显的，有两个模式在页面上打开。我使用的是react-modal3.3.1。

Answer 1

多亏了在this GitHub issue post上提供的帮助，我让它按如下方式工作：

<Modal dialogClassName='custom-dialog'...>

CSS：

.custom-dialog {width:48% !important; top:20%;}

我遗漏的部分是需要用!important覆盖宽度设置。宽度是相对于视口宽度的，所以我通过反复试验找到了一个值，该值给出了底层Modal宽度的所需百分比。