๐ค ์์งlog ๐ค
[REACT] Modal ๋ณธ๋ฌธ
๐ฃ 1. Modal Background CSS (๊ธฐ๋ณธ์ ์ธ)
import styled from 'styled-components'
const Modal = () => {
return (
<>
<Backdrop />
<Container>Modal</Container>
</>
)
}
const Backdrop = styled.div`
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
`
const Container = styled.div`
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
min-width: 300px;
border-radius: 4px;
`
export default Modal๐ฃ 2. Bootstrap.jsx ์ปดํฌ๋ํธ ์์ฑ
import { useState } from 'react'
import Modal from './Modal'
const Bootstrap = () => {
const [showModal, setShowModal] = useState(false)
const onClose = () => {
setShowModal(false)
}
return (
<div>
<button onClick={() => setShowModal(true)}>๋ชจ๋ฌ</button>
{showModal && <Modal onClose={onClose} />}
</div>
)
}
export default Bootstrap๐ฃ 3. Modal.jsx ์ปดํฌ๋ํธ ์์ฑ
import styled from 'styled-components'
const Modal = ({ onClose }) => {
return (
<>
<Backdrop onClick={onClose} />
<Container>
<Header>Modal heading</Header>
<Body>Woohoo, you're reading this text in a modal!</Body>
<Footer>
<BtnClose onClick={onClose}>Close</BtnClose>
<BtnSave>Save Changes</BtnSave>
</Footer>
</Container>
</>
)
}
const Backdrop = styled.div`
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
`
const Container = styled.div`
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
min-width: 300px;
border-radius: 4px;
`
const Header = styled.div`
font-size: 24px;
padding: 15px;
border-bottom: 1px solid #ddd;
`
const Body = styled.div`
padding: 15px;
`
const Footer = styled.div`
padding: 5px;
border-top: 1px solid #ddd;
display: flex;
justify-content: flex-end;
`
const Btn = styled.button`
padding: 10px;
border-radius: 4px;
border: none;
cursor: pointer;
color: #fff;
margin: 5px;
font-size: 16px;
`
const BtnClose = styled(Btn)`
background: gray;
`
const BtnSave = styled(Btn)`
background: blue;
`
export default Modal728x90
'๐ React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [REACT] Instagram _ Log-In (0) | 2022.10.06 |
|---|---|
| [REACT] Naver ์ฑ ๊ฒ์ (0) | 2022.10.06 |
| [REACT] Naver ์ํ ๊ฒ์ (0) | 2022.10.06 |
| [REACT] DropDown (0) | 2022.10.06 |
| [REACT] Accordion (0) | 2022.10.06 |
'๐ React' Related Articles
more
