Browse Source

Fix modal should create with portal (#318)

Herman Ho 5 years ago
parent
commit
7433a3fe30
1 changed files with 5 additions and 3 deletions
  1. 5 3
      client/components/Modal.tsx

+ 5 - 3
client/components/Modal.tsx

@@ -1,6 +1,7 @@
 import { Flex } from "reflexbox/styled-components";
 import { Flex } from "reflexbox/styled-components";
 import styled from "styled-components";
 import styled from "styled-components";
 import React, { FC } from "react";
 import React, { FC } from "react";
+import ReactDOM from "react-dom";
 
 
 import Animation from "./Animation";
 import Animation from "./Animation";
 
 
@@ -30,13 +31,13 @@ const Modal: FC<Props> = ({ children, id, show, closeHandler, ...rest }) => {
     if (e.target.id === id) closeHandler();
     if (e.target.id === id) closeHandler();
   };
   };
 
 
-  return (
+  return ReactDOM.createPortal(
     <Wrapper id={id} onClick={onClickOutside}>
     <Wrapper id={id} onClick={onClickOutside}>
       <Animation
       <Animation
         offset="-20px"
         offset="-20px"
         duration="0.2s"
         duration="0.2s"
         minWidth={[400, 450]}
         minWidth={[400, 450]}
-        maxWidth={0.9}
+        maxWidth="90%"
         py={[32, 32, 48]}
         py={[32, 32, 48]}
         px={[24, 24, 32]}
         px={[24, 24, 32]}
         style={{ borderRadius: 8, backgroundColor: "white" }}
         style={{ borderRadius: 8, backgroundColor: "white" }}
@@ -45,7 +46,8 @@ const Modal: FC<Props> = ({ children, id, show, closeHandler, ...rest }) => {
       >
       >
         {children}
         {children}
       </Animation>
       </Animation>
-    </Wrapper>
+    </Wrapper>,
+    document.body
   );
   );
 };
 };