[ react] #7 Hooks useState
2024.03.06
북마크 작성자 정보
작성일/수정일
2024-03-06 14:11:01 / 2024-03-06 14:11:01
모달 팝업 #1
CSS App_new.css
* { margin:0; padding:0; box-sizing:border-box;}
.header_area { display:block; width:100%; height:50px; line-height:50px; padding-left:20px; border-bottom:1px solid #ddd; }
.header_area h2 { font-size:20px;}
.body_area { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex-direction:row; width:100%; height:calc(100vh - 50px); }
.body_area button { display:block; padding:10px; border:1px solid #ddd; background:#fff; cursor:pointer; }
.modal_dimm { position:fixed; left:0; top:0; z-index:1; display:block; width:100%; height:100vh; background:rgba(0, 0,0,0.5);; }
.modal_dimm .modal { position:absolute; left:50%; top:50%; z-index:2; width:500px; height:300px; transform:translate(-50%,-50%); background:#fff; border-radius:30px; }
.modal_dimm .modal .tit { position:relative; display:block; width:100%; height:60px; line-height:70px; border-bottom:1px solid #ececec; padding:0 30px 0 30px; box-sizing:border-box; font-weight:bold; font-size:20px;}
.modal_dimm .modal .tit .btn { position:absolute; right:30px; top:19px; width:30px; height:30px; border:0px dotted #000; transform:rotate(45deg); cursor:pointer;}
.modal_dimm .modal .tit .btn:before { content:""; position: absolute; left:0%; top:15px; width:30px; height:1px; background:rgba(0, 0,0,1); }
.modal_dimm .modal .tit .btn:after { content:""; position: absolute; left:50%; top:0px; width:1px; height:30px; background:rgba(0, 0,0,1); }
.modal_dimm .modal .bdy { padding:20px 30px; }
.footer_area { display:block; text-align:center; height:80px; line-height:80px; background:#000; color:#ddd; }
App.js
import React, {useState} from 'react';
import Modal from './Modal';
import './App_new.css';
function App()
{
return(
<div>
<div className="header_area">
<h2>Open Popup</h2>
</div>
<div className="body_area">
<Modal></Modal>
</div>
<div className="footer_area">
Footer area 20220907 relation.co.kr
</div>
</div>
);
}
export default App;
Modal.js
import React, { useState} from 'react';
function Modal()
{
let [modal, setModal] = useState('false');
function ChangeModal()
{
if(modal == true)
{
setModal(false);
document.body.style.overflow = "visible";
}
else
{
setModal(true);
document.body.style.overflow = "hidden";
}
}
function Modal_layout()
{
return(
<div className="modal_dimm">
<div className="modal">
<div className="tit">
Modal Title
<div className="btn" onClick={()=>{
ChangeModal();
}}></div>
</div>
<div className="bdy">Modal Body</div>
</div>
</div>
)
}
return(
<>
<button type="button" id="popupDom" onClick={ function(){
ChangeModal();
} }>Open-Modal</button>
{
modal === true ? <Modal_layout/> :null
}
</>
);
}
ex