[JavaScript] Lightbox & Modal(code)

See the Pen XWpewea by minsucoding (@minsucoding) on CodePen.

 

 

---

 

 

라이트 박스는 보통 쇼핑몰과 같은 홈페이지에서 상품을 클릭했을때 더 자세히 보이게 해주는 이벤트이다

우선 원리는 비슷하므로 background속성을 가지고 간단하게 만들어 보았습니다

각 색부분을 클릭을 하게 되면 더 큰 크기에 박스가 나오게 됩니다

아직 완벽하게 구현을 하지 못해서

1.상품이 추가되었을때 컨테이너의 크기가 자동으로 늘어나는부분

2.big_img와 close btn의 absolute를 줌으로써 닫기 버튼을 좀더 자유롭게 이동시키는 부분

3.이미지를 띄웠을때 클릭한 이미지마다 상품설명을 하는 텍스트를 추가하는 부분

4.지금 당장 만들수는 있지만 코드가 너무 길어지는 부분

지금 구현하지 못하고, 보완을 해야될 부분을 간단하게 적어보니 4가지나 되는거 보니 더 많은 공부를 해야될거같습니다

 

 

---

 

 

 

여기서 img를 삽입해서 사용하게 된다면 html의 img를 변수로 만들어주고 img.src를 가지고와서 그걸 target으로 잡아 오는걸로 응용하시면 될거에요!

 

 

---