Modal close when clicking outside

This commit is contained in:
Daniel Kluge 2022-08-15 12:57:09 +02:00
parent 01a4a29e45
commit 468de2a4a4

View File

@ -102,11 +102,11 @@ const ProjectModal: NextPage = () => {
return <div className={styles.pageSelector}>{prev}<span style={{visibility: currentPage > 0 ? "visible" : "hidden"}}>&nbsp;&nbsp;|&nbsp;&nbsp;</span>{select}<span style={{visibility: currentPage < currentContent.entries.length ? "visible" : "hidden"}}>&nbsp;&nbsp;|&nbsp;&nbsp;</span>{next}</div>; return <div className={styles.pageSelector}>{prev}<span style={{visibility: currentPage > 0 ? "visible" : "hidden"}}>&nbsp;&nbsp;|&nbsp;&nbsp;</span>{select}<span style={{visibility: currentPage < currentContent.entries.length ? "visible" : "hidden"}}>&nbsp;&nbsp;|&nbsp;&nbsp;</span>{next}</div>;
})(); })();
return <div className={styles.modal}> return <div className={styles.modal} onClick={() => setVisible(false)}>
<a onClick={() => setVisible(false)} className={styles.fakeLink}> <a onClick={() => setVisible(false)} className={styles.fakeLink}>
<div className={styles.modalClose}><div className={styles.modalCloseAlign}>X</div></div> <div className={styles.modalClose}><div className={styles.modalCloseAlign}>X</div></div>
</a> </a>
<div className={styles.modalContainer}> <div className={styles.modalContainer} onClick={(event) => event.stopPropagation()}>
{nextPageSelector} {nextPageSelector}
<div className={`${styles.modalText} asciidoc`} ref={containerRef} dangerouslySetInnerHTML={{ __html: HTMLContent ? HTMLContent : projectEmpty }}> <div className={`${styles.modalText} asciidoc`} ref={containerRef} dangerouslySetInnerHTML={{ __html: HTMLContent ? HTMLContent : projectEmpty }}>