웹03_중첩되는 팝업 한번에 띄우기(매개변수), has Class

 

Html 에 class 추가

button class="close-btn-1"

 

js에 매개변수 사용해서 선언해주기

 

function popup_Show(no){
    $(".popup-section-" + no).addClass("active");
    $("body").addClass("over-flow");
}
popup_Show(1); popup_Show(2); popup_Show(3);

function popup_Open(no){
    $(".popup-open-" + no).click(function () {
        popup_Show(no)
    });
  }
  popup_Open(1); popup_Open(2); popup_Open(3);
  
  
  function popup_Close(no){
    $(".close-btn-" + no + ", .popup-section-" + no).click(function () {
        $(".popup-section-" + no).removeClass("active");
        $("body").removeClass("over-flow");
      });
  }
  popup_Close(1); popup_Close(2); popup_Close(3);
  
  $(".popup-content").click(function(){
    return false;
  });

""안에 문장 + no (숫자) + " 쌍따음표 하나더 선언, .문장 " + no

 

배경이 중첩 되는 문제점 해결해야함 

 

토요일 일요일동안 복습 해야함.

css, html 마무리는 잘 해주기

 

https://codepen.io/leenyooo/pen/BaERyML

has Class

 

console.clear();
// 왼쪽에 있는 박스(.box)가 오른쪽에 있는 클래스 active를 가지고 있는지 가지고 있지 않은지 판단해서 식을 실행시킬지 실행 시키지 않을지 결정한다.
// 가지고 있으면 if문 실행else문 실행x
// 가지고 있지 않으면 else문 if문 실행 x
$("button").click(function(){
  if ($(".box").hasClass("active")){
  $(".box").removeClass("active");
}
else {
  $(".box").addClass("active");
}
});