page. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15]

29일차 (정리완료)

1. 2개의 팝업일 때 작성 방법

• 팝업 메뉴가 1개일 때 만드는 방법을 배웠었다.
• 이번에는 팝업 메뉴가 2개 이상일 때 어떻게 만들지 배웠다.
• 팝업 메뉴가 두 개라면 html 에 팝업 마크업을 하나 더 만들어야 한다.
• 그리고 거기에 popup-1 popup-2 등으로 Class 를 달아준다.

<!-- 팝업1 -->
<div class="popup-1 popup">  // 띄어쓰기로 두 개의 클래스를 구분함
  <div class="popup__content">
    <div class="popup__head">
      <div class="popup__btn-close"></div>
    </div>
    <div class="popup__body">
      <div class="con">
        팝업1
      </div>
    </div>
  </div>
</div>

<!-- 팝업2 -->
<div class="popup-2 popup">
  <div class="popup__content">
    <div class="popup__head">
      <div class="popup__btn-close"></div>
    </div>
    <div class="popup__body">
      <div class="con">
        팝업2
        <br>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde cu
      </div>
    </div>
  </div>
</div>

• 이후에는 하나의 팝업에서 했던 것과 동일하게 JS 를 작성하면 된다.

console.clear();

  $(".btn-popup-1").click(function () {
    $(".popup-1").addClass("active");
  });

  $(".popup-1 .popup__btn-close").click(function () {
    $(".popup-2").removeClass("active");
  });
  
  $(".btn-popup-2").click(function () {
    $(".popup-2").addClass("active");
  });

  $(".popup-2 .popup__btn-close").click(function () {
    $(".popup-2").removeClass("active");
  });

• 여기서 .popup 에는 공통 클래스가 있어서 그거 하나에 공통의 효과를 달아도 동작은 되지만, 이렇게 쓰는 이유는 나중에 코드가 많아지면 어디에 적용 되는건지 구분하기 위해서라고 한다.
• 유의하도록 한다.
• 이렇게 자바스크립트를 작성 했지만 우리가 함수를 하는 이유는 반복된 작업을 하지 않기 위해서인데 다시 반복으로 작성되어 비효율적이다
• 이것을 효율적으로 바꿔줄 것이다.
• 메뉴창 2개 를 JS 로 작성할 때 간략하게 하는 방법