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

我正在做一个reactjs项目，其中我有导航菜单，我正在使用jquery模式弹出窗口，我的菜单之一是“导入”，它包含两个子菜单“CCAWB&GAWB”。我正在使用react组件在“导入”下呈现这两个子菜单

有什么建议吗

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

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

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

 $(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');});