Question

我正在尝试向我的应用添加模式。我这样做是为了使我的页面加载后将显示（不需要按钮）用于测试目的。我以"bootstrap": "^4.1.3"作为依存关系。

在CSS上，我将其显示为阻止状态：

.modal{
  display: block
}

.modal-content{
  display: block
}

在我的react应用中，将其导入并按以下方式使用：

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的文档中复制了模式代码，并进行了一些修改，使其可以用于我的测试目的。我还尝试了许多不同的代码，但是这些模式都不起作用。

我尝试过的内容：我在Stack上阅读了许多与此问题相关的帖子。其中许多原因仅是因为OP不包含某些文件或未将display属性设置为show。就我而言，我都不是。

任何建议都会有所帮助

Answer 1

该模态应与触发器一起显示，该触发器将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

Answer 2

我相信您的.fade类具有属性opacity: 0;，您的CSS应该用opacity: 1;覆盖此属性

Boostrap 4：模式不会显示在我的React应用中

2 个答案: