2

我正在使用 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属性，但这也不起作用。我只需要内容的顶部边框稍微低一些，因为它是在同一位置的另一个模态框之上打开的，并且我希望它在视觉上很明显，在页面上打开了两个模态框。我正在使用反应模式 3.3.1。

4

1 回答 1

5

感谢此 GitHub issue post上提供的帮助，我让它按如下方式工作： 

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

CSS： 

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

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

于 2018-03-30T16:28:15.073 回答