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;
}

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

0 个答案: