웹3 - 5강 (5/27)

POPUP 2

[수업내용 코드펜]

코드펜

있는 그대로 복붙했으나 팝업이 안뜸..

 

[배경 클릭 시 팝업 닫힘]

1. 배경을 클릭했을 때에도 닫히게 하기 위해선 button(태그)뒤에 .popup-section(클래스)를 추가해준다.
    > 이 때 웹상에서 검사 기능을 활용하여 구조를 찾아준다.

$("button, .popup-section").click(function () {

  $(".popup-section").removeClass("active");

});

   > 이때 팝업창을 눌러도 닫히는 문제가 발생한다.
2. .popup-content를 클릭하면 .popup-content는 클릭되고 부모인 .popup-section은 클릭되면 안된다.
   > 따라서 popup-section의 하위엘리먼트인 .popup-content의 클릭이벤트에 return false;를 넣어 클릭을 방지해준다. (return false의 특성)

// .popup-content

// click (o)

// return false

// function

$(".popup-content").click(function (){

  return false;

});

 

 

[stopPropagation]

stopPropagation

name은 약간 라이브러리처럼 생각할 수 있다.

 

 

[이름생략]

add_Popup이라는 이름이 굳이 필요하지 않다 어짜피 이벤트를 발동하면 바로 함수가 실행되기 때문이다.
따라서 이름을 생략하여 함수식을 소괄호 안에 넣어줄 수 있다.

$(".popup-open").click(add_Popup);

function add_Popup() {

  $(".popup-section").addClass("active");

}

add_Popup 삭제

$(".popup-open").click(function () {

  $(".popup-section").addClass("active");

});

마지막 줄에서는 소괄호가 바깥쪽에 있어야 한다. (); 안에 함수식(){};;이 들어갔기 때문.

 

 

[return false]

1. 클릭을 막아주는 역할을 한다. (끊어주는 역할)
2. return false가 걸려있는 선택자는 클릭되고 상위엘리먼트 부터 클릭되지 않는다.
     ex) body - section - div - article - nav - span이 있는 경우 div에 걸면 section, body가 클릭되지 않는다.
3. return false를 사용하지 않도록 html, css구조 구현하는 것이 좋다.(a태그 함께 사용시 특히 주의)