React-Bootstrap 全屏模态对话框

Question

我目前正在尝试使包含在 react-bootstrap 中的 Modal 组件全屏显示。

我可以从文档中看到，对话框的各个组件（模态、页眉、页脚、正文）通过“bsClass”接受自定义类，但是一旦呈现高度，高度就会被另一个具有“模态内容”类的 div 限制，但看不到将自定义类传递给 this 的方法。

是否可以这样做，或者是否有另一种方法可以在对话框呈现后无需手动更改类即可实现相同的效果？

Answer 1

是的，它的记录在他们的网站，但你只能改变base class的subcomponent，如Modal.header, Modal.footer不加custom classes，所以你可能要面对一些困难的CSS代码做到这一点，这是我的模态代码，

     <Modal
      {...this.props}
      show={this.state.show}
      onHide={this.hideModal}
      dialogClassName="custom-modal"
      bsClass="my-modal"
    >

使用下面的 CSS 代码，我可以使引导代码全屏显示

@media (min-width: 992px)
.my-modal-lg {
    width: auto;
}

@media (min-width: 768px)
.my-modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
 }

@media (min-width: 768px)
.my-modal-content {
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    height: auto;
    min-height: 100%;
    border-radius: 0;
}

为了更好地控制您的modal data, form，text我建议您查看以下 GitHub 存储react-bootstrap-modal库

https://github.com/jquense/react-bootstrap-modal

如果你想尝试除了 之外的任何东西bootstrap modal，那么你也可以react-modal通过访问下面的网址来查看，

https://github.com/reactjs/react-modal