-
그그그 팝업 비슷한거 있는데 이름이 뭐지?(모달 페이지)웹/react 2021. 2. 22. 02:33반응형
modal? 팝업창 이랑 뭐가 다른 거지?
modal란?
모달(Modal)은 사용자의 이목을 끌기 위해 사용하는 화면전환 기법입니다.
특징
- 꼭 이목을 끌어야하는 화면에서 이용함
- 배경이 어둡게 되면서 원래 패이지와 분리되어있다는 느낌을 준다
popup이란?
팝업창이란 현재 열려있는 브라우저 페이지에 또다른 브라우저 페이지를 띄우는 것이다.
특징
- 별도의 창에서 열림
- 팝업창은 재활용,이동이 자유롭다.(모달은 iframe을 이용한다)
- 브라우저 설정에서 팝업을 나오지 않게 막을수 있다.
modal이 왜 필요한가?
창을 띄운다는 것은 특정 내용을 사용자에게 어필하고 싶다는 뜻이다. 프로모션을 진행하거나, 서비스에 대한 공지, 주의사항, 안내문 등을 전달해야할 때. 또는 강조해야할 때 사용해야 한다.
modal window 만들기
modal -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
반응형'웹 > react' 카테고리의 다른 글
hooks-2 (useCallback,useMemo,useRef) (0) 2021.05.14 hooks-1 (useSate, useEffect) (0) 2021.05.13 나도 만들 수 있다 todolist (외전) (0) 2020.05.18 나도 만들어 보자 toodolist (3) (0) 2020.05.10 나도 만들어 보자! todolist (2) (0) 2020.05.02