React-Bootstrap全屏模態對話框

Question

我目前正在嘗試使模態組件包含在react-bootstrap中以全屏顯示。

我可以從文檔中看到，對話框（模態，頁眉，頁腳，主體）的各個組件通過「bsClass」接受自定義類，但是一旦呈現高度被另一個div與類「模式內容「，但無法看到將自定義類傳遞給此的方法。

是否可以做到這一點，或者是否有另一種達到相同效果的方式，而無需在對話框渲染後手動更改類？

Answer 1

是的，它的記錄在他們的網站，但你只能改變base class的如Modal.header, Modal.footersubcomponent不添加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; 
} 

爲了讓您的modaldata的更多的控制權，form，text我建議看看下面GitHub的react-bootstrap-modal回購

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

，如果你想嘗試不同的bootstrap modal任何東西，那麼你也可以通過訪問以下網址看看在react-modal ，

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