在React JS中使用淡入淡出时，无法看到Bootstrap 4.0.0-beta.3模态

Question

演示：

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>

莫代尔正在隐藏背后

  

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

Answer 1

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

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

如果您需要或使用模式淡入，则过度写入。希望能帮助到你 ！！！