Bootstrap 4.0.0-beta.3 modal cannot be seen when used with fade in React JS

Question

Demo:

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>

Run codeHide result

Modal hides the back

I need modal attenuation, but it is hiding as a given image.

Answer 1

The problem is that fade has opactiy 0 by default in bootstrap.css

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

above the record if you need or use fade's modal . Hope it helps !!!