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

Question

我正在尝试为我的应用程序添加模式。我这样做是为了让一旦我的页面加载，它将显示(不需要按钮(用于测试目的。 我有"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 的文档复制了模态代码并进行了一些修改，以便它适用于我的测试目的。我也尝试了许多不同的代码，但没有一个模式有效。

我尝试过什么：我已经阅读了许多与Stack上此问题相关的帖子。其中许多仅仅是由于OP不包含某些文件或显示属性未设置为显示。就我而言，我都不是。

任何建议都会有所帮助

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;覆盖它