리액트 모달창 구현
const onPopup=(e,index,isAlready,card)=>{
const name = e.currentTarget.getAttribute('name')
const isOn = isAlready;
const input_id = '#'+card;
const e_top = $(input_id).position();
console.log(e_top)
const e_pop = e_top.top+40+'px';
console.log(e_top, e_pop,input_id)
$('.popup').css('top',e_pop);
setPop({
...pop,
pName : name,
status :true,
top : e_pop,
toggle : isOn,
})
}
이렇게 했는데 자꾸만 바닥에 붙어있었음
이유는 어이ㅓㅈㅄ게도
export default function Popup(prop) {
const txt = prop.txt;
const show = prop.state;
const top = prop.top;
const toggle = prop.toggle;
const [post, setPost] = useState({
title : '',
add : '로',
del : '가',
});
useEffect(()=>{
if(txt=='auto_send') {
setPost({
...post,
title:'자동발송',
add:'이',
del:'이'
})
}
if(txt=='bookmark'){
setPost({
...post,
title:'즐겨찾기',
add:'로',
del:'가'
})
}
},[])
return (
<Fade clear>
<div className="b-popup>
<div className="popup" style={{"top":"50px"}}>
<div className="pop-txt"><p>{post.title}</p>
{toggle
?
<p>{post.del} 해제되었습니다.</p>
:
<p>{post.add} 설정되었습니다.</p>
}</div>
</div>
</div>
</Fade>
)
}
이렇게 하고 popup 창에만 위치 조정 css를 줌
부모태그인 b-popup은 그냥 밑에 달려있어서 올라오는데 시간이 걸렸던 것
정신차려 ㅜㅋ