javascript - 引导模态行为问题（反应）

Question

我正在为我的应用程序使用引导模式。一开始它工作得很好，但是一旦我打开菜单栏并关闭它，即使我单击它，模式也不会再打开，背景也不会消失。我有截图以便更好地理解。

1.登陆页面

2.测试模态（工作）

3.打开侧边菜单栏

4.关闭侧边菜单后，尝试再次打开模态（不工作）

为了打开菜单栏，我在 body 标签上使用了 transform: translateX() ，所以从技术上讲，整个身体会左右移动以显示菜单。如果我注释掉转换：translateX()，即使在我单击菜单栏后模态也能正常工作（它显然不显示菜单，但除了转换之外，其他 CSS 属性的工作方式相同）。所以我发现转换属性会导致模态出现问题，但我不明白为什么以及如何解决它。

已编辑（添加代码）：

import 'App.css';

class App extends Component {

   constructor(props) {
     super(props);
     this.menu_bar = false;
   }

toggleMenu = () => {
    const app = document.querySelector('.App');

    if( this.menu_bar ){
      app.style.transform = 'translateX(0)';
      app.classList.remove('coverApp');
      this.menu_bar = false;
    }else {
      app.style.transform = 'translateX(300px)';
      app.classList.add('coverApp');
      this.menu_bar = true;
    }
  }

  hideMenu = (e) => {
    const app = document.querySelector('.App');

    if( e.target.classList.contains('coverApp') ){
      app.style.transform = 'translate(0)';
      app.classList.remove('coverApp');
      this.menu_bar = false;
    }
  }

render() {
  return (
     <div className="App" onClick={this.hideMenu}>
        <Navbar toggleMenu={this.toggleMenu}/>
        <LeftMenuBar toggleMenu={this.toggleMenu}/>
        <Route path="/" exact component={HomePage}/>
     </div>
    )
  }
}

---

function Navbar(props) {

    const { toggleMenu } = props;

    return (
    <nav className="Navbar">
        <span>
            <div id="nav-toggle" onClick={toggleMenu} >&#9776;</div>
            ...
        </span>
    </nav>
    )

}

---

  function LeftMenuBar(props) {
     const { toggleMenu } = props;

     return (
         <main className="LeftMenuBar">
            <div className="content">
               <div className="controller">
                  <p>ENGLISH</p>
                  <div className="btn-close" onClick={toggleMenu}>CLOSE</div>
                   ...
               </div>
            </div>
         </main>
       )
     }

---

   class HomePage extends Component {

      render() {
         return (
             <main className="HomePage">
                 <button type="button" id="modal-btn" className="btn btn-primary" data-toggle="modal" data-target="#home_modal" aria-label="close">
                LETS START!
                 </button>
                 <div className="HomeModal">
                      <div id="home_modal" className="modal" tabIndex="-1" role="dialog" aria-labelledby="home_modal">
                           <div className="modal-dialog" role="document" style={{marginTop: '150px', maxWidth: '750px'}}>
                                <div className="modal-content">
                                      <div className="modal-body" style={{backgroundColor: 'white'}}>...</div>
                                </div>
                           </div>
                      </div>
                  </div>
              </main>
            )
         }
     }

---

CSS

   body {
      overflow: hidden;
   }

   .App {
      transition: transform 0.5s;
   }

.coverApp::before {
    content: '';
    opacity: 1;
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 300;
    background-color: rgba(0, 0, 0, .75);
    transition: all 0.5s ease-in-out;
}

.LeftNavbar {
   position: fixed;
   background: rgba(50, 50, 50);
   color: #f1f1f1;
   width: 300px;
   height: 100vh;
   top: 0;
   left: -300px;
   border-right: solid 0.2px lightgray;
} 

#modal-btn {
  position: absolute;
  top: 350px;
  left: 500px;
}

.HomeModal {
  position: absolute;
  top: 350px;
  left: 700px;
}

标签： javascripthtmlcssbootstrap-modalcss-transforms