React-Bootstrap Full screen Modal Dialog

Question

В настоящее время я пытаюсь включить компонент Modal, включенный в реакцию-бутстрап, в полноэкранный режим.

Из документации видно, что отдельные компоненты диалогового окна (модальный, верхний колонтитул, нижний колонтитул, тело) принимают пользовательские классы через «bsClass», однако как только отображаемая высота ограничивается другим div с классом «modal» -content ", но не может видеть способ передачи пользовательского класса.

Возможно ли это сделать или существует другой способ достижения такого же эффекта без ручного изменения класса после визуализации диалога?

Answer 1

Да, это документально на их сайте, но вы можете только изменить base classsubcomponent, такие как 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; 
} 

чтобы получить более полный контроль над вашей modaldata , form, text я хотел бы предложить, чтобы взглянуть на следующий GitHub react-bootstrap-modal репо

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

и если вы хотите попробовать что-нибудь, кроме bootstrap modal, то вы также можете взглянуть на react-modal, посетив ниже URL ,

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