リアブートストラップ全画面モーダルダイアログ

Question

現在、反応ブートストラップに含まれるModalコンポーネントを全画面表示にしようとしています。

ダイアログボックス（Modal、Header、Footer、Body）の個々のコンポーネントは、 "bsClass"でカスタムクラスを受け入れることができますが、レンダリングされた高さはクラス "モーダル-content "になりますが、これにカスタムクラスを渡す方法はありません。

これを行うことは可能ですか、またはダイアログがレンダリングされた後にクラスを手動で変更することなく同じ効果を達成する別の方法がありますか？

Answer 1

はい、それは彼らのウェブサイト上の文書化されていますが、あなただけbase classを変更することができ、そのようなModal.header, Modal.footerなどsubcomponentがcustom classesを追加しませんので、あなたがCSSコードでそれを行うにはいくつかの困難に直面しなければならない場合があり、ここに私のモーダルコードは、

私はあなたの modal dataのより多くの制御を取得するには

@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; 
} 

ブートストラップコードのフルスクリーンを作ることができたCSSのコードの下で

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

、form、text私は次のGitHubのreact-bootstrap-modalレポ

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

、あなたがbootstrap modal以外のものを試してみたい場合は、その後、あなたはまた、以下のURLを訪問しreact-modalで見ることができ見てすることをお勧め、

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