JS - 팝업 열기/ 닫기

팝업 열기

click으로 팝업 열기

1. 제이쿼리 가져오기
2. popup 클래스 만들기
3. 컨테이너 클래스를 만들고 그 안에 버튼 만들기
4. 팝업 버튼을 클릭했을 때 팝업 창 구현
5. JS 함수 만들기

mouseenter로 팝업 열기

• mouseenter : 팝업 버튼에 마우스를 올리면 팝업 창이 열리게 해준다.

팝업 닫기

click으로 팝업 닫기

1. HTML에 팝업 닫기 버튼을 생성
   -> 제이쿼리를 사용하고 있기 때문에 HTML에 CSS 적용을 할 수 있다.

2. 팝업 닫기 버튼을 눌렀을 때 팝업창 사라지게 하는 JS에 함수 만들기

mouseleave로 팝업 닫기

• mouseleave : 팝업창 닫기 버튼에 마우스를 두었다 떼면 창을 닫는다.