[JavaScript]팝업 레이어 적용 + 배경 블러효과, 배경 클릭 시 팝업 닫기

안녕하세요 :) 무택입니다🧔

이번에는 웹페이지에서 빠질 수 없는 팝업 적용하는 코드에 대해 기록하도록 하겠습니다.

일반적인 팝업에 배경 블러효과+팝업 활성화 시 배경 클릭 시 닫히는 기능도 같이 구현했습니다.

배경 블러효과를 주면 팝업에 더 집중되는 효과를 줄 수 있습니다.

 

See the Pen popup Layer(배경 블러 효과 + 외부 클릭시 닫기) by TytanLee (@TytanLee) on CodePen.

 

추가로 사용된 문법들에 대한 정리는 아래를 참고해 주세요.

 

 

 

[jQuery] mouseup()
mouseup() 메서드는 선택한 요소에서 마우스를 눌렀다가 떼었을 때 이벤트가 발생합니다.

#문법

$("선택자").mouseup();

 

 

[JavaScript] classList.add()
classList.add() 메서드는 선택한 요소한테 클래스 이름을 추가합니다.

#문법

"선택자".classList.add("클래스 이름")
"선택자".classList.add("클래스 이름", "클래스 이름",....)

 

 

[JavaScript] classList.remove()
classList.remove() 메서드는 선택한 요소한테 클래스 이름을 추가합니다.

#문법

"선택자".classList.remove("클래스 이름")
"선택자".classList.remove("클래스 이름", "클래스 이름",....)

 

[jQuery] .target
e.target은 실제 클릭한 요소를 알려줍니다.(이벤트가 발생한 곳)