반응형
Notice
Recent Posts
Recent Comments
Link

«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

꿈꾸는 사람.

초보 개발자를 위한 웹 팝업 가이드: 레이어 팝업 생성하기 본문

IT/Web Development

초보 개발자를 위한 웹 팝업 가이드: 레이어 팝업 생성하기

현무랑 니니 2023. 3. 29. 18:21
반응형

Layered popup 개요

Layered popup은 웹 서비스에서 사용자 인터랙션을 돕기 위해 만들어진 팝업창 중 하나로,

HTML, CSS, JavaScript를 활용해 구현할 수 있다. 

이러한 팝업은 일반적으로 웹 페이지의 다른 요소 위에 층처럼 겹쳐져 나타나며,

주로 사용자에게 중요한 정보를 전달하거나 추가적인 입력을 요청할 때 사용된다.

Layered popup의 동작 원리

1. HTML

먼저 웹 페이지의 HTML 구조에 팝업 요소를 추가한다. 이는 보통 div 요소로 구현되며, 필요한 경우 form 요소를 포함할 수도 있다.

  <div id="layered-popup" class="popup-container">
    <div class="popup-content">
      <h2>레이어 팝업</h2>
      <p>팝업에 표시할 내용을 여기에 추가</p>
      <span class="close" onclick="closePopup()">&times;</span>
    </div>
  </div>

2. CSS

팝업의 스타일을 지정하기 위해 CSS를 사용한다. 팝업을 화면 중앙에 표시하고, 다른 요소 위에 겹치도록 z-index를 높게 설정한다. 또한, 팝업이 처음에는 보이지 않게 display: none을 설정한다.

.popup-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 9999;
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}

3. JavaScript

팝업을 열고 닫기 위한 동작을 JavaScript로 구현한다. 일반적으로 버튼을 클릭하면 팝업이 나타나고, 닫기 버튼이나 배경을 클릭하면 팝업이 사라지도록 설정한다.

  <script>
    const popup = document.getElementById("layered-popup");

    function openPopup() {
      popup.style.display = "block";
    }

    function closePopup() {
      popup.style.display = "none";
    }
  </script>

Layered popup의 간단한 예제

아래의 위에서 설명한 코드들을 종한합  예제로 사용자가 버튼을 클릭하면 팝업이 나타나고,

x를 클릭하면 팝업이 사라진다.

이런 Layered popup은 웹 페이지에서 중요한 정보 전달, 알림  등 다양한 목적으로 사용될 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .popup-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
      z-index: 9999;
    }

    .popup-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <button onclick="openPopup()">팝업 열기</button>

  <div id="layered-popup" class="popup-container">
    <div class="popup-content">
      <h2>레이어 팝업</h2>
      <p>팝업에 표시할 내용을 여기에 추가</p>
      <span class="close" onclick="closePopup()">&times;</span>
    </div>
  </div>

  <script>
    const popup = document.getElementById("layered-popup");

    function openPopup() {
      popup.style.display = "block";
    }

    function closePopup() {
      popup.style.display = "none";
    }
  </script>
</body>
</html>

 

반응형
저작자표시 변경금지

'IT > Web Development' 카테고리의 다른 글

node.js 설치와 서버 객체 생성 및 테스트  (0) 2021.08.10
[Spring][Spring Tool Suite 4.0.1][SSL] certification error  (5) 2019.01.03
'IT/Web Development' Related Articles more
Comments