웹/react
그그그 팝업 비슷한거 있는데 이름이 뭐지?(모달 페이지)
allblack
2021. 2. 22. 02:33
반응형
modal? 팝업창 이랑 뭐가 다른 거지?
modal란?
모달(Modal)은 사용자의 이목을 끌기 위해 사용하는 화면전환 기법입니다.
특징
- 꼭 이목을 끌어야하는 화면에서 이용함
- 배경이 어둡게 되면서 원래 패이지와 분리되어있다는 느낌을 준다
popup이란?
팝업창이란 현재 열려있는 브라우저 페이지에 또다른 브라우저 페이지를 띄우는 것이다.
특징
- 별도의 창에서 열림
- 팝업창은 재활용,이동이 자유롭다.(모달은 iframe을 이용한다)
- 브라우저 설정에서 팝업을 나오지 않게 막을수 있다.
modal이 왜 필요한가?
창을 띄운다는 것은 특정 내용을 사용자에게 어필하고 싶다는 뜻이다. 프로모션을 진행하거나, 서비스에 대한 공지, 주의사항, 안내문 등을 전달해야할 때. 또는 강조해야할 때 사용해야 한다.
modal window 만들기
-react version-
import React from "react";
import styled from "styled-components";
interface ModalProps {
children?: React.ReactNode;
}
const colors = {
primary: "#000000",
};
const viewport = {
mobile: "800px",
};
function Modal({ children }: ModalProps) {
return (
<Wrap
onClick={() => {
alert("모달 중지")
}}
>
<Body onClick={(e) => e.stopPropagation()}>
<div>
modal
{children}
</div>
</Body>
</Wrap>
);
}
const Wrap = styled.div`
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 3000;
animation: appear 0.5s;
@keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
`;
const Body = styled.div`
position: absolute;
background: white;
max-width: 720px;
width: 100%;
box-sizing: border-box;
padding: 3em 2em;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
border-radius: 10px;
transition: background 0.5s;
@media (max-width: ${viewport.mobile}) {
max-width: 520px;
}
&:focus {
outline: 0;
}
`;
export default Modal;
html version
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modal</title>
</head>
<style>
#modalWrap {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 3000;
animation: appear 0.5s;
@keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
#modalBody {
position: absolute;
background: white;
max-width: 720px;
width: 100%;
box-sizing: border-box;
padding: 3em 2em;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
border-radius: 10px;
transition: background 0.5s;
}
#modalBody:focus{
outline: 0;
}
</style>
<body>
<div id="modalWrap" onclick="alert('모달 중지')">
<div id="modalBody" onclick="event.stopPropagation();">
modal
</div>
</div>
</body>
</html>
famous0811/blog
Contribute to famous0811/blog development by creating an account on GitHub.
github.com
반응형