관리자 :: 상품 추가 팝업창으로 변경하기

상품 수정을 하려고 하니,

수정 버튼을 클릭했을때 팝업창으로 상품 정보를 가져오도록 하고

수정을 진행하게 할려고 생각했다.

 

그럼 상품을 추가하는 것도 똑같은 양식으로 팝업창을 통해 해주면 좋을 꺼같아서

상품 추가해주는 것을 팝업창으로 나오도록 해주겠다.

 

저 빨간 네모를 팝업창으로 만들어주자

 

css에 이렇게 넣어주면

 

이렇게 위로 뜬다.

 

팝업창을 마우스로 옮길수 있게 만들어 줄 것이다.

 

 

구글에 jqueryui cdn이라고 검색하고. 저 게시물에 들어가서

 

저 네모를 클릭해서 코드를 복사한다.

 

그리고 product.jsp 상단에 추가해준다.

 

product.js

js에 다음과 같이 추가해주면,

팝업창의 h1("상품추가"라고 적혀있는 상단)을 잡고 팝업창의 위치를 옮길 수 있다.

 

팝업창을 닫을 수 있는 닫기 버튼도 만들어 주자

 

하단에 닫기 버튼이 만들어졌다.

 

상단에 '상품 추가' 버튼을 생성해주었다.

저 버튼을 클릭했을 때에 팝업창을 띄어주도록 하자

 

 

잘 작동하는지 확인해보자

 

우선 상품 관리 페이지에 들어가면 상품 추가 버튼과 리스트를 확인할 수 있다.

 

상품 추가 버튼을 클릭하면

 

팝업창이 뜬다.

'

 

다음과 같이 상품이 잘 추가 됨을 확인할 수 있다.

 

** 다음 게시물에서는

수정하기 버튼을 클릭했을 때,

상품 추가할 때와 같은 팝업창이 뜨며

기존의 데이터를 모두 들고와 정보를 수정해서 저장할 수 있도록 만들어주자