팝업창과 모달창의 공통점과 차이점

1. 팝업창

: 팝업창이란 현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것이다.

즉, 창 + 창n 이란 개념이다. 브라우저에서 이 창을 열기 / 닫기를 제어할 수 있다.

하지만, 브라우저에서 팝업창을 강제로 막아 놓을 경우 보이지 않는다.

 

 

- HTML

 

<h1>팝업창 만들기</h1>

 

 

- jQuery

 

      $(function () {
        function openPopup() {
          window.open(
            "http://www.naver.com",
            "네이버팝업",
            "width=500,height=500,left=250,top=250"
          );

          window.open(
            "http://www.daum.net",
            "다음팝업",
            "width=500,height=500,left=750,top=250"
          );
        }
        openPopup();
      });

 

 

0

 

창을 열면 곧바로 팝업창이 새 창으로 뜨게 된다. 쇼핑몰 홈페이지에서 이런 것을 자주 볼 수 있다.

 

 

 

 

 

2. 모달창

: 모달창은 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌 레이어를 까는 것을 말한다.

모달창은 제거를 하지 않고도 페이지를 이동하면 자연스레 사라진다.

기존의 페이지와 부모-자식 관계를 가지며, 브라우저의 새 창 제어 옵션에는 전혀 영향을

받지 않는다.

 

일반적으로 모달 대화상자라고 불리는데, 파일 열기 / 저장 대화상자를 생각하면 이해하기 쉽다. 

예를 들어 일반적으로 사용자의 명령을 인식하기 위해서나, 긴급 상황을 알리기 위해 많이 사용

된다. 웹의 경우 이미지를 자세하게 보기위해 클릭할 때 자주 사용된다.

 

 

 

 

- HTML

 

    <h1>모달팝업창 만들기</h1>
    <button>Click Me !</button>
    <div id="modal">
      <div class="pop">
        모달창입니다.
        <a href="#" id="close">Close</a>
      </div>
    </div>

 

 

- CSS

 

      #modal {
        position: fixed;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        background: rgba(0, 0, 0, 0.5);
      }

      #modal .pop {
        position: absolute;
        left: 50%;
        top: 50%;

        transform: translate(-50%, -50%);

        width: 500px;
        height: 500px;

        background: #fff;
      }

 

 

 

- jQuery

 

      $(function () {
        $("#modal").hide();
        $("button").click(function () {
          $("#modal").show();
        });

        $("#close").click(function (e) {
          e.preventDefault();
          $("#modal").hide();

          location.href = "http://www.naver.com";
        });
      });

 

 

0

 

Close 버튼을 누르면 네이버 홈페이지로 이동하도록 만들었다.

새 창으로 뜨지 않고 기존 창에서 바로 이동하는 것을 볼 수 있다.

 

 

 

 

3. 팝업창과 모달창의 공통점

 

: 특정 역영의 위치에 원하는 사이즈로 별도의 레이어를 만들어서 사용자에게 어필하고자 한다.

프로모션을 진행, 서비스 공지, 주의사항, 안내문 등을 전달 또는 강조할 때 새 창을 이용한다.

 

 

4. 팝업창과 모달창의 차이점

: 팝업창의 경우 웹 시작과 동시에 띄우는 경우가 많고, 모달창의 경우 중간 중간 사용자에게 보여주는

경우가 많다.

 

사용 의도에 관점을 두고 본다면 팝업창은 현재 의도하는 목적과 상관없이 뜨는 창이고,

모달창은 다음 진행으로 넘어가기 위한 필요에 의해 사용되는 창이다.

 

또 다른 차이는 팝업창은 사용자가 원할 경우 브라우저의 옵션을 통해 열지 않도록 강제할 수 있는

기능이 있다. 그렇기 때문에 반드시 노출해야하는 부분은 모달창을 사용하는 것이 좋을 것이다.

 

모달창은 부모창에 종속되는 게 많아서 마우스 오른쪽 버튼을 눌러 소스보기를 할 수 가 없다.

그리고 모달창을 닫기 전에는 부모창에 직접 이벤트를 행할 수 없다.

그에 비해 팝업창은 자유롭다.

 

즉, 팝업창은 '자유자제로 제어가 가능'하지만, 모달창은 '반드시 노출해야하는 부분'이 있을 때

사용된다.

 

 

 

5. 팝업 상세 설정

let popup = window.open(‘팝업주소’,‘팝업창 이름’,‘팝업창 설정’);

let popup = window.open(‘http://www.naver.com’,‘네이버팝업’,‘width=500, height=700, scrollbars=yes’);

 

- width : 팝업창의 가로 길이

- height : 팝업창의 세로 길이

- top : 창의 화면 위에서부터의 팝업 위치 지정

- left : 창의 화면 왼쪽에서부터의 팝업 위치 지정

- scrollbars : 팝업 스크롤바 사용여부 (yes, no)

 

 

 

 

 

 

 

* 내용 참고 출처

: [IT 용어정리] 팝업창 VS 모달창, 차이점은 뭘까? (tistory.com)