Boostrap 4: модал не будет отображаться в моем приложении реакции - PullRequest
Новая
       43

Boostrap 4: модал не будет отображаться в моем приложении реакции

0 голосов
/ 19 октября 2018

Я пытаюсь добавить модал в свое приложение.Я делаю так, чтобы при загрузке моей страницы она отображалась (не требуется кнопка) для целей тестированияУ меня "bootstrap": "^4.1.3" как моя зависимость.

На моем CSS я делаю так, чтобы дисплей был блочным: 

.modal{
  display: block
}

.modal-content{
  display: block
}

В моем приложении реакции я импортирую его и использую какследуйте: 

import 'bootstrap/dist/css/bootstrap.min.css';

  render() {
    return (
      <div className="App">
        <div className="modal fade" id="myModal" role="dialog">
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <button type="button" className="close" data-dismiss="modal">&times;</button>
                <h4 className="modal-title">Modal Header</h4>
              </div>
              <div className="modal-body">
                <header className="App-header">
                  Code Authentication
                </header>

                <div className="row">
                  <div className="col-sm-6">
                      {this.getPhoneList()}
                  </div>
                  <div className="col-sm-6">
                      {this.getMethodList()}
                  </div>
                </div>

                <button type="button" className="btn btn-info" onClick={() => this.VerifyCode()}>
                  VERIFY CODE
                </button>
              </div>
              <div className="modal-footer">
              </div>
            </div>

          </div>
        </div>
      </div>
    );
  }

Я скопировал модальный код из документа boostrap и немного изменил его, чтобы он работал для моих целей тестирования.Я также пробовал много разных кодов, но ни один из модальных вариантов не работал.

Что я пробовал: я прочитал много постов, связанных с этими проблемами, в стеке.Многие из них были просто из-за того, что OP не включал определенный файл, или атрибут отображения не установлен для показа.В моем случае я ни один.

Любые предложения будут полезны

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Модал должен отображаться с триггером, который добавляет modal-open к телу и show к модалу.Чтобы сделать модальное шоу, удалите fade и добавьте класс d-block, который заставит модальное отобразить. 

<div className="modal d-block" id="myModal" role="dialog">
          <div className="modal-dialog">
            <div className="modal-content">
...

https://www.codeply.com/go/r47k4BlDKA

0 голосов
/ 19 октября 2018

Я считаю, что у вашего .fade класса есть атрибут opacity: 0;, ваш CSS должен переопределить это с opacity: 1;

...