React popup창 에러

DONNIE·2022년 7월 29일
0

리액트 모달창 구현

    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은 그냥 밑에 달려있어서 올라오는데 시간이 걸렸던 것

정신차려 ㅜㅋ

profile
후론트엔드 개발자

0개의 댓글