代码之家 › 专栏 › 技术社区 › Jay Jeong

引导模式行为问题(react)

css-transforms bootstrap-modal css html javascript

Jay Jeong · 技术社区 · 7 年前

我正在为我的应用程序使用引导模式。刚开始的时候效果很好,但是一旦我打开菜单栏并关闭它,modal就不会再打开了,即使我单击它,背景也不会消失。为了更好的理解我有截图。

1.登录页

2.试验模态(工作)

3.打开侧菜单栏

4.关闭侧菜单后,再次尝试打开模式(不工作)

为了打开菜单栏,我在body标记上使用transform:translateX(),因此从技术上讲,整个实体会左右移动以显示菜单。如果我注释掉transform:translateX(),那么即使在我单击菜单栏之后,modal仍然可以正常工作(它显然不显示菜单,但是除了transform之外,其他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 回复 | 直到 7 年前