Boostrap 4：模态不会显示在我的反应应用程序上答案

【问题标题】：Boostrap 4: Modal won't show on my react appBoostrap 4：模态不会显示在我的反应应用程序上
【发布时间】：2019-03-24 14:55:58
【问题描述】：

我正在尝试向我的应用程序添加模式。我这样做是为了一旦我的页面被加载，它将显示（不需要按钮）用于测试目的。我有 "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 没有包含某些文件或显示的属性未设置为显示。就我而言，我两者都不是。

任何建议都会有所帮助

【问题讨论】：

打开模态的代码在哪里？
@Zim 我做到了，这样模态将只显示没有按钮的调用。因为我正在尝试做一个类似模态的 UI，所以我只是简单地将我的元素放在模态中

标签： javascript reactjs bootstrap-4 bootstrap-modal

【解决方案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

【讨论】：

谢谢！还有一个问题：将模态用于类似模态的 UI 是一种好习惯吗？稍后我将不得不通过按钮更改模态中的内容，在 react 中实现似乎是一件复杂的事情。我觉得我的方法不对
我不确定这是一个主观问题，但通常模态被用作模态，就是这样。
我明白了。 d block 和 display: block 不一样吗？为什么设置 modal 的 display 为 block 不起作用，而 d block 起作用？
将.modal 设置为 display:block 也应该可以。
我有它（见我的问题），它不起作用。只有 d-block 有效。

【解决方案2】：

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

【讨论】：