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

Posted 2023-03-05

【中文标题】在 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

【发布时间】：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>

模态隐藏在背后

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

【参考方案1】：

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

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

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