반응형

HTML5에서 제공하는 <dialog> 태그는 웹에서 간단하고 접근성 높은 모달 대화 상자를 만드는 데 유용합니다. 기본적으로 팝업 기능을 제공하며, 자바스크립트와 CSS를 활용하여 다양한 형태로 확장할 수 있습니다. 여기에서는 <dialog> 태그를 활용한 여러 가지 팝업 유형을 예제를 통해 설명합니다.

1. 기본 팝업

설명

가장 기본적인 팝업으로, 버튼 클릭 시 팝업을 열고 닫습니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic Dialog</title>
  <style>
    dialog {
      border: none;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      text-align: center;
    }
  </style>
</head>
<body>
  <button id="openDialog">Open Dialog</button>
  <dialog id="basicDialog">
    <p>This is a basic dialog popup!</p>
    <button id="closeDialog">Close</button>
  </dialog>
  
  <script>
    const dialog = document.getElementById('basicDialog');
    document.getElementById('openDialog').addEventListener('click', () => dialog.showModal());
    document.getElementById('closeDialog').addEventListener('click', () => dialog.close());
  </script>
</body>
</html>

2. 팝업 중앙 정렬

설명

팝업을 화면 중앙에 배치하고 배경을 어둡게 처리합니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Dialog</title>
  <style>
    dialog::backdrop {
      background-color: rgba(0, 0, 0, 0.5);
    }
    dialog {
      border: none;
      border-radius: 10px;
      padding: 30px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
      text-align: center;
    }
  </style>
</head>
<body>
  <button id="openDialog">Open Centered Dialog</button>
  <dialog id="centeredDialog">
    <p>This dialog is centered with a dimmed background.</p>
    <button id="closeDialog">Close</button>
  </dialog>

  <script>
    const dialog = document.getElementById('centeredDialog');
    document.getElementById('openDialog').addEventListener('click', () => dialog.showModal());
    document.getElementById('closeDialog').addEventListener('click', () => dialog.close());
  </script>
</body>
</html>

3. 확인 및 취소 버튼이 있는 팝업

설명

확인과 취소 버튼이 있는 팝업으로, 확인 시 특정 동작을 실행하도록 설정합니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Confirm Dialog</title>
  <style>
    dialog {
      border: none;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      text-align: center;
    }
    dialog button {
      margin: 5px;
    }
  </style>
</head>
<body>
  <button id="openDialog">Open Confirm Dialog</button>
  <dialog id="confirmDialog">
    <p>Are you sure you want to proceed?</p>
    <button id="confirmBtn">Yes</button>
    <button id="cancelBtn">No</button>
  </dialog>

  <script>
    const dialog = document.getElementById('confirmDialog');
    document.getElementById('openDialog').addEventListener('click', () => dialog.showModal());
    document.getElementById('cancelBtn').addEventListener('click', () => dialog.close());
    document.getElementById('confirmBtn').addEventListener('click', () => {
      alert('Action Confirmed!');
      dialog.close();
    });
  </script>
</body>
</html>

4. 사용자 입력 폼 팝업

설명

사용자로부터 입력을 받는 폼 팝업입니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Dialog</title>
  <style>
    dialog {
      border: none;
      border-radius: 10px;
      padding: 20px;
      text-align: center;
    }
    dialog form {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  </style>
</head>
<body>
  <button id="openDialog">Open Form Dialog</button>
  <dialog id="formDialog">
    <form method="dialog">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>
      <menu>
        <button value="cancel">Cancel</button>
        <button value="submit">Submit</button>
      </menu>
    </form>
  </dialog>

  <script>
    const dialog = document.getElementById('formDialog');
    document.getElementById('openDialog').addEventListener('click', () => dialog.showModal());
  </script>
</body>
</html>

5. 자동 닫힘 팝업

설명

일정 시간 후 자동으로 닫히는 팝업입니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Auto Close Dialog</title>
  <style>
    dialog {
      border: none;
      border-radius: 10px;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <button id="openDialog">Open Auto-Close Dialog</button>
  <dialog id="autoDialog">
    <p>This dialog will close automatically after 3 seconds.</p>
  </dialog>

  <script>
    const dialog = document.getElementById('autoDialog');
    document.getElementById('openDialog').addEventListener('click', () => {
      dialog.showModal();
      setTimeout(() => dialog.close(), 3000);
    });
  </script>
</body>
</html>

6. 반응형 팝업

설명

화면 크기에 따라 크기가 조정되는 반응형 팝업입니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Dialog</title>
  <style>
    dialog {
      width: 90%;
      max-width: 500px;
      border: none;
      border-radius: 10px;
      padding: 20px;
    }
    @media (min-width: 768px) {
      dialog {
        width: 50%;
      }
    }
  </style>
</head>
<body>
  <button id="openDialog">Open Responsive Dialog</button>
  <dialog id="responsiveDialog">
    <p>This is a responsive dialog. Resize the screen to see the effect.</p>
    <button id="closeDialog">Close</button>
  </dialog>

  <script>
    const dialog = document.getElementById('responsiveDialog');
    document.getElementById('openDialog').addEventListener('click', () => dialog.showModal());
    document.getElementById('closeDialog').addEventListener('click', () => dialog.close());
  </script>
</body>
</html>

위의 예제를 통해 기본적인 팝업부터 사용자 입력, 자동 닫힘, 반응형 팝업 등 다양한 형태를 구현할 수 있습니다. 이 코드를 필요에 맞게 확장하여 활용해 보세요!

반응형
저작자표시

'개발 > HTML' 카테고리의 다른 글

2일차: 텍스트 형식화와 링크  (1) 2025.01.28
1일차: HTML 기본 이해  (0) 2025.01.27
HTML/CSS를 사용하여 Header와 Left 고정 및 Scrollable Body 구현  (0) 2025.01.13
Canvas를 활용한 간단한 게임 개발  (0) 2025.01.11
HTML5 canvas 태그: 모든 것을 담을 수 있는 도화지  (0) 2025.01.11

+ Recent posts

티스토리툴바