팝업창과 모달창

JavaScript

by 헬로제이콥 2024. 12. 2. 09:50

팝업창과 모달창: 차이점과 장단점, 그리고 모달창 예제

팝업창과 모달창, 무엇이 다를까요?

팝업창과 모달창은 웹 페이지에서 사용자에게 추가적인 정보를 제공하거나 특정 행동을 유도하기 위해 사용되는 창입니다. 비슷해 보이지만 몇 가지 중요한 차이점이 있습니다.

팝업창:
- 현재 열려 있는 브라우저 페이지 위에 새로운 브라우저 창을 띄우는 방식입니다.
- 독립적인 창이기 때문에 메인 페이지와 별개로 조작이 가능합니다.
- 광고, 이벤트 알림 등 주의를 집중시키는 용도로 많이 사용됩니다.
- 단점: 사용자에게 불편함을 줄 수 있으며, 광고 차단 프로그램에 의해 차단될 수 있습니다.
모달창:
- 현재 페이지 위에 레이어를 씌워 새로운 창을 띄우는 방식입니다.
- 메인 페이지는 비활성화되고, 모달창 안에서만 사용자의 입력을 받습니다.
- 사용자에게 특정 정보를 입력받거나, 결정을 요구할 때 사용됩니다.
- 장점: 팝업창보다 덜 거슬리고, 사용자 경험을 해치지 않으면서 정보를 전달할 수 있습니다.

팝업창과 모달창의 장단점 비교

특징 팝업창 모달창

독립성	높음	낮음
주의 집중도	높음	낮음
사용자 경험	낮음	높음
광고 차단	차단 가능성 높음	차단 가능성 낮음
활용 용도	광고, 이벤트 알림 등	정보 입력, 결정 유도 등

Sheets로 내보내기

모달창 예제 (HTML, CSS, JavaScript)

HTML

<!DOCTYPE html>
<html>
<head>
  <title>모달창 예제</title>
  <style>
    .modal {
      display: none; /* 처음에는 숨겨짐 */
      position: fixed; /* 화면 중앙에 고정 */
      z-index: 1; /* 다른 요소 위에 표시 */
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto; /* 스크롤 가능 */
      background-color: rgba(0,0,0,0.4); /* 배경 흐리게 */
    }

    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
    }
  </style>
</head>
<body>
  <button id="myBtn">모달 열기</button>

  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>모달 창입니다. 여기에 원하는 내용을 추가할 수 있습니다.</p>
    </div>
  </div>

  
  <script>
  // 모달 객체 얻기
  var modal = document.getElementById("myModal");

  // 모달 열기 버튼 얻기 (여백문제 수정)
  var btn = document.getElementById("myBtn");

  // 모달 닫기 버튼 (<span> 태그) 얻기
  var span = document.getElementsByClassName("close")[0];

  // 사용자가 버튼을 클릭하면 모달 열기
  btn.onclick = function() {
    modal.style.display = "block";
  }

  // 사용자가 닫기 버튼(X)을 클릭하면 모달 닫기
  span.onclick = function() {
    modal.style.display = "none";
  }

  // 사용자가 모달 바깥 영역을 클릭하면 모달 닫기
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>
</body>
</html>

위 예제를 통해 모달창을 만들고, 버튼 클릭 시 모달창이 나타나고 닫히는 기능을 구현했습니다.

HTML: 모달창의 구조를 정의하고, 버튼과 모달창을 위한 div 요소를 생성합니다.
CSS: 모달창의 스타일을 지정합니다.
JavaScript: 모달창을 열고 닫는 기능을 구현합니다.

참고:

위 예제는 기본적인 모달창 구현 방법이며, 더욱 다양한 기능과 디자인을 추가할 수 있습니다.
라이브러리를 활용하면 더욱 간편하게 모달창을 만들 수 있습니다. (예: Bootstrap, jQuery UI)

모달창 활용 시 주의사항:

사용자 경험: 모달창은 사용자의 흐름을 방해할 수 있으므로, 필요한 경우에만 사용하고 닫기 버튼을 명확하게 표시해야 합니다.
접근성: 키보드로도 모달창을 조작할 수 있도록 해야 합니다.
반응형 디자인: 다양한 화면 크기에 맞춰 모달창이 적절하게 표시되도록 해야 합니다.

'JavaScript' 카테고리의 다른 글

Flexbox 레이아웃을 사용하여 요소를 가운데 정렬하는 방법 (0)	2024.12.09
노트 추가 기능 (0)	2024.11.28
자바스크립트 함수 표현식 (2)	2024.11.22
자바스크립트 함수 (1)	2024.11.22
자바스크립트 for 문 (0)	2024.11.22