|
@@ -53,44 +53,48 @@ class DetailsModal extends Component {
|
|
|
render() {
|
|
|
const {showTipsDetails, tipsDetails} = this.props;
|
|
|
const { currentIndex } = this.state
|
|
|
- const domNode = document.getElementById('root');
|
|
|
- return showTipsDetails && ReactDOM.createPortal(
|
|
|
- <div className={styles['details-wrapper']}>
|
|
|
- <div className={styles['details-content-wrapper']} id="detailsContentWrap">
|
|
|
- <h1 id="detailsContentTitle" className={`${styles['details-content-name']} drag-title`} >{tipsDetails && tipsDetails.tagName} <img className={styles['details-close']} onClick={this.hideTips} src={close} /></h1>
|
|
|
- <div className={styles['details-content']} id= 'detailsContent' onScroll={this.handleScrollModal.bind(this, tipsDetails)}>
|
|
|
- {tipsDetails && tipsDetails.introduceDetailList && tipsDetails.introduceDetailList.map((item, index) => {
|
|
|
- return (<div id={item.title}>
|
|
|
- <div className={styles['details-content-title-box']} >
|
|
|
- <span className={styles['details-content-title-name']}>{item.title}</span>
|
|
|
- <div className={styles['details-content-title-line']}></div>
|
|
|
- </div>
|
|
|
- <div dangerouslySetInnerHTML ={{__html: item.content.replace(/{imageUrlPrefix}/g, imageUrlPrefix)}}></div>
|
|
|
- </div>)
|
|
|
- })}
|
|
|
-
|
|
|
- </div>
|
|
|
- <div className={styles['content-menu-box']}>
|
|
|
- <div className={styles['content-menu']}>
|
|
|
- {tipsDetails && tipsDetails.introduceDetailList && tipsDetails.introduceDetailList.map((item, index) => {
|
|
|
- return (<div>
|
|
|
- <div className={styles['details-menu-title-box']}>
|
|
|
- {index === 0 ? '' : <div className={styles['details-content-menu-line']}></div>}
|
|
|
- <span onClick={this.handleClickMenu.bind(this, index, item, tipsDetails)} className={styles['details-content-menu-name']} style = {index === currentIndex ? {color:'#0089be'} : ''}>
|
|
|
- <span className={styles['details-content-menu-circle']} style = {index === currentIndex ? {background:'#0089be'} : ''}></span>{item.title}
|
|
|
- </span>
|
|
|
+ return <NewPortal visible = {showTipsDetails}>
|
|
|
+
|
|
|
+ <div className={styles['details-wrapper']}>
|
|
|
+ <div className={styles['details-content-wrapper']} id="detailsContentWrap">
|
|
|
+ <h1 id="detailsContentTitle" className={`${styles['details-content-name']} drag-title`} >{tipsDetails && tipsDetails.tagName} <img className={styles['details-close']} onClick={this.hideTips} src={close} /></h1>
|
|
|
+ <div className={styles['details-content']} id= 'detailsContent' onScroll={this.handleScrollModal.bind(this, tipsDetails)}>
|
|
|
+ {tipsDetails && tipsDetails.introduceDetailList && tipsDetails.introduceDetailList.map((item, index) => {
|
|
|
+ return (<div id={item.title}>
|
|
|
+ <div className={styles['details-content-title-box']} >
|
|
|
+ <span className={styles['details-content-title-name']}>{item.title}</span>
|
|
|
+ <div className={styles['details-content-title-line']}></div>
|
|
|
</div>
|
|
|
+ <div dangerouslySetInnerHTML ={{__html: item.content.replace(/{imageUrlPrefix}/g, imageUrlPrefix)}}></div>
|
|
|
</div>)
|
|
|
})}
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div className={styles['content-menu-box']}>
|
|
|
+ <div className={styles['content-menu']}>
|
|
|
+ {tipsDetails && tipsDetails.introduceDetailList && tipsDetails.introduceDetailList.map((item, index) => {
|
|
|
+ return (<div>
|
|
|
+ <div className={styles['details-menu-title-box']}>
|
|
|
+ {index === 0 ? '' : <div className={styles['details-content-menu-line']}></div>}
|
|
|
+ <span onClick={this.handleClickMenu.bind(this, index, item, tipsDetails)} className={styles['details-content-menu-name']} style = {index === currentIndex ? {color:'#0089be'} : ''}>
|
|
|
+ <span className={styles['details-content-menu-circle']} style = {index === currentIndex ? {background:'#0089be'} : ''}></span>{item.title}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>)
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div className={styles['details-mask']} onClick={this.hideTips}>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div className={styles['details-mask']} onClick={this.hideTips}>
|
|
|
- </div>
|
|
|
- </div>,
|
|
|
- domNode
|
|
|
- )
|
|
|
+
|
|
|
+
|
|
|
+ </NewPortal>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|