在 React JS 中使用淡入淡出时，Bootstrap 4.0.0-beta.3 模态不可见答案

【问题标题】：Bootstrap 4.0.0-beta.3 modal can't visible when using with fade in React JS在 React JS 中使用淡入淡出时，Bootstrap 4.0.0-beta.3 模态不可见
【发布时间】：2018-07-19 20:42:50
【问题描述】：

演示：

closeConfirrmDialog() {
  var modal = document.getElementById('profileConfirm');
  modal.style.display = "none";
}

<div className="modal fade" id="profileConfirm" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel"  data-backdrop="static" data-keyboard="false">
  <div className="modal-dialog" role="document" style={{width:"500px"}}>
    <div className="modal-content">
	  <div className="modal-header">
	    <h4 className="modal-title" id="myModalLabel">Updation success</h4>
	  </div>
	<div className="modal-body"> Profile has been updated successfully.. </div>
	<div className="modal-footer">
	  <div className="pull-right">
		<button className="twk-uix-button twk-uix-button-size-default twk-uix-button-primary twk-uix-button-empty comment-simplebox-submit twk-uix-sessionlink" type="button" style={{background:"#5cb85c", color:"#fff"}} onClick={this.closeConfirrmDialog.bind(this)} >OK</button>
	 </div>
   </div>
</div>
   </div>
 </div>

模态隐藏在背后

我需要模态淡入淡出，但它隐藏为给定图像。

【问题讨论】：

标签： css html twitter-bootstrap reactjs bootstrap-modal

【解决方案1】：

问题是，在 bootstrap.css 中，fade 默认的 opactiy 为 0

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

如果需要，请改写或使用模态淡入。希望能帮助到你！！！

【讨论】：