css - 在 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>

Modal 正在隐藏背面

I need modal fade but it is hiding as given image.

Answer 1

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

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

如果需要或使用模态淡入，请覆盖。希望能帮助到你 !!!