Javascript (자바스크립트) 활용 - 팝업(popup) 구현

마크업을 하고 페이지를 만드는 과정에서 스크립트를 이용해 만드는 이벤트 중 스크롤, 탭과 마찬가지로 많이 사용하는게 있다면 아마 팝업이 될 것이다.

특정 버튼이나 영역을 클릭하면 그 버튼에 해당하는 내용을 가진 팝업은 웹페이지 작업시 빼놓을 수 없는 이벤트이다.

 

1. 클릭 이벤트 발생 시키기

팝업을 노출시키기 위해선 특정 버튼이나 영역을 클릭해야한다.

이 때 .addEventListener 메소드를 사용한다.

<a href="#pop_info_1" class="btn_open">팝업 열기</a>
<a href="#pop_info_2" class="btn_open">팝업 열기2</a>

<!-- 팝업1 -->
<div id="pop_info_1" class="pop_wrap" style="display:none;">
  <div class="pop_inner">
    <p class="dsc">팝업 안내문구 입니다.</p>
    <button type="button" class="btn_close">닫기</button>
  </div>
</div>

<!-- 팝업2 -->
<div id="pop_info_2" class="pop_wrap" style="display:none;">
  <div class="pop_inner">
    <p class="dsc">팝업 안내문구 입니다222.</p>
    <button type="button" class="btn_close">닫기</button>
  </div>
</div>


<script>
  var target = document.querySelectorAll('.btn_open'); // 클릭할 버튼요소를 변수 처리

  // 팝업 열기
  for(var i = 0; i < target.length; i++){
    target[i].addEventListener('click', function(){
      targetID = this.getAttribute('href');
      document.querySelector(targetID).style.display = 'block';
    });
  }
</script>

위와 같이 target이라는 팝업을 열 버튼을 변수 처리한 후에

addEventListner로 click 이벤트를 걸어준다.

 

이 때, 클릭 이벤트는 .btn_open이 하나가 아니기 때문에

for 문을 돌려 .btn_open의 갯수에 맞춰 각각 버튼에 클릭 이벤트를 걸어준다.

 

2. 버튼 클릭 후 노출 될 팝업 영역 호출하기

버튼을 클릭하는 액션은 만들었다면

버튼 클릭 액션 동작 후 팝업 영역을 노출되게 만들어야한다.

<a href="#pop_info_1" class="btn_open">팝업 열기</a>
<a href="#pop_info_2" class="btn_open">팝업 열기2</a>

<!-- 팝업1 -->
<div id="pop_info_1" class="pop_wrap" style="display:none;">
  <div class="pop_inner">
    <p class="dsc">팝업 안내문구 입니다.</p>
    <button type="button" class="btn_close">닫기</button>
  </div>
</div>

<!-- 팝업2 -->
<div id="pop_info_2" class="pop_wrap" style="display:none;">
  <div class="pop_inner">
    <p class="dsc">팝업 안내문구 입니다222.</p>
    <button type="button" class="btn_close">닫기</button>
  </div>
</div>


<script>
  var target = document.querySelectorAll('.btn_open');
  var targetID;  // 버튼 클릭시 버튼에 해당하는 팝업의 id값 담는 변수

  // 팝업 열기
  for(var i = 0; i < target.length; i++){
    target[i].addEventListener('click', function(){
      targetID = this.getAttribute('href');
      document.querySelector(targetID).style.display = 'block';
    });
  }
</script>

팝업열기 버튼을 (btn_open)을 클릭 할 때

a 태그의 href의 값과 팝업의 id값을 일치시켜줘서 접근성으로도 해당 버튼과 팝업이 연결되도록 작업하고

추가로 여러 버튼과 팝업이 나오더라도 스크립트를 추가하지 않고

a태그의 href와 팝업의 id값만 맞춘다면 언제든지 수월하게 팝업을 만들 수 있게 위와 같이 작업하였다.

(현재 클릭한 a태그의 href를 가져오는 this.getAttribute('href');)

 

3. 팝업 닫기

팝업을 열었으면 닫기 버튼의 동작도 필요하다.

팝업을 열 때와 마찬가지로 페이지에 있는 .pop_wrap 내부에 있는 .btn_close 닫기 버튼을

for문을 돌려 각각 클릭 이벤트를 걸어준 뒤

해당 버튼의 부모 노드(pop_wrap)을 찾아서 해당 div를 닫아준다.

<a href="#pop_info_1" class="btn_open">팝업 열기</a>
<a href="#pop_info_2" class="btn_open">팝업 열기2</a>

<!-- 팝업1 -->
<div id="pop_info_1" class="pop_wrap" style="display:none;">
  <div class="pop_inner">
    <p class="dsc">팝업 안내문구 입니다.</p>
    <button type="button" class="btn_close">닫기</button>
  </div>
</div>

<!-- 팝업2 -->
<div id="pop_info_2" class="pop_wrap" style="display:none;">
  <div class="pop_inner">
    <p class="dsc">팝업 안내문구 입니다222.</p>
    <button type="button" class="btn_close">닫기</button>
  </div>
</div>


<script>
  var target = document.querySelectorAll('.btn_open');
  var targetID;

  // 팝업 열기
  for(var i = 0; i < target.length; i++){
    target[i].addEventListener('click', function(){
      targetID = this.getAttribute('href');
      document.querySelector(targetID).style.display = 'block';
    });
  }
  
  // 팝업 닫기
  for(var j = 0; j < target.length; j++){
    btnPopClose[j].addEventListener('click', function(){
      this.parentNode.parentNode.style.display = 'none';
    });
  }
</script>

 

 

4. 예시 화면

버튼이 여러개, 팝업이 여러개인 예시를 통해서

왜 위와 같이 a태그의 href 속성을 통한 팝업을 작업하는지 예시를 들어보려한다.