React-Modal 无法设置位置

Question

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

这就是我渲染模态的方式：

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-modal 3.3.1。

Answer 1

感谢在此 GitHub 问题帖子中提供的帮助，我让它按如下方式工作：

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

CSS：

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

我缺少的部分是需要用!important. 宽度是相对于视口宽度而言的，所以我通过反复试验找到了一个值，它给了我所需的基础模态宽度的百分比。