Question

我正在开展一个有导航菜单的reactjs项目，我正在使用jquery模式弹出，我的一个菜单是＆＃34;导入＆＃34;它包含两个子菜单＆＃34; CCAWB＆amp; GAWB＆＃34;我使用反应组件来渲染这两个子菜单＆＃34;导入＆＃34;

     <li className="has-submenu">
                    <a href="#">
                        <span>Import</span>
                    </a>
                    <ul className="submenu">
                        <li>
                            <ul>
                                <RenderCCAWB_GAWBPopUp submenu ="CCAWB"/>
                                <RenderCCAWB_GAWBPopUp submenu ="GAWB"/>
                            </ul>
                        </li>
                    </ul>
        </li>

RenderCCAWB_GAWBPopUp组件返回以下内容

 render(){
        return(<li onClick={this.handleShowModal}>
                 {this.props.submenu}
                 {this.state.view.showModal ? <UpdateQualityHeaderDummy 
   handleHideModal={this.handleHideModal} menuName={this.props.submenu} />:null}
               </li>);}

点击任何子菜单＆＃34; CCAWB / GAWB＆＃34;我想显示模态弹出窗口由另一个组件返回的

UpdateQualityHeaderDummy返回模态本身

 return (
               <div className="modal" data-backdrop='static' id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div className="modal-dialog" >
                            <div className="modal-content">
                                <div className="modal-header">
                                    <h5 className="modal-title" id="exampleModalLabel">{title}</h5>
                      <button onClick={this.closePop} type="button" className="close" 
                          data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div className="modal-body">
                                    <div  className="row">
                                        <div className=" col-lg-12 col-xl-12 
                                                          qcUpdateStatus">    
                                        </div>                           
                                           <FileUpload menuTitle={this.props.menuName}/>

                                    </div>

                                </div>
                                <div className="modal-footer">
                                    <button type="button" className="btn btn-secondary" data-dismiss="modal" onClick ={this.closePop}>Close</button>
                                    <button type="button" className="btn btn-danger" data-dismiss="modal" onClick ={this.downloadFeed}>Download Feed</button>     
                                    <button type="button" className="btn btn-primary" onClick={this.validateForm}> Upload </button>
                                </div>
                            </div>
                        </div>
                    </div>);
            } });

直到这里一切正常，模态显示为附加波纹管 [场景的屏幕1] [1]

* =＆gt;问题出在这里，每当鼠标指针离开浏览器（即进入网址栏）时，模态和子菜单都会消失，但模态不透明度会停留在那里（附在下面）

Screen 2 when the pointer is outside the page

* =＆gt;但只要指针返回页面（任何位置），它们会立即显示附加波纹管屏幕3 Screen 3 when the pointer is inside the page

* =＆GT;我的试验：我已经尝试了事件mouseleave（当鼠标离开浏览器时）并将子菜单的可见性设置为可见但它们一直在消失我甚至在相同的事件中将模态显示属性设置为true但是也没有工作

 $(document).mouseleave(function () {
                    $('.modal').css('visibility','visible');
                    $('#navigation > div > ul > li:nth-child(5) > 
                      ul').css('visibility','visible');

                    $('#myModal > div').css('visibility','visible');
                    $('#myModal > div > div').css('visibility','visible');});

有什么建议吗？

当鼠标指针离开浏览器时，jQuery模式弹出窗口消失

0 个答案: