[Add] modal 가운데정렬 #86

모달이 가운데 정렬되도록 설정
connect-foundation · Dec 12, 2019 · 58eb256 · 58eb256
1 parent 11d6e68
commit 58eb256
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/client/src/composition/DetailFeed/CommonModal.tsx b/client/src/composition/DetailFeed/CommonModal.tsx
@@ -5,7 +5,7 @@ import { ReactNode } from 'react';
 const ModalFrame = styled.div`
   background-color: white;
   height: 80%;
-  position: fixed;
+  position: absolute;
   z-index: 2000;
   display: flex;
 `;
@@ -21,12 +21,21 @@ const ModalBackgroud = styled.div`
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const Wrapper = styled.div`
   position: fixed;
   z-index: 1000;
+  width: 100%;
+  height: 100%;
   top: 0;
   left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
-
 const CloseModal = styled.p`
   color: white;
   float: right;
@@ -52,7 +61,7 @@ function Commonmodal({
     setIsOpen(false);
   };
   return isOpen ? (
-    <>
+    <Wrapper>
       <ModalBackgroud>
         <CloseModal onClick={closeModal}>X</CloseModal>
       </ModalBackgroud>
@@ -61,7 +70,7 @@ function Commonmodal({
         {imageChildren && <ImageContent>{imageChildren}</ImageContent>}
         <TextContent>{textChildren}</TextContent>
       </ModalFrame>
-    </>
+    </Wrapper>
   ) : (
     <></>
   );