모달 (열기/닫기)

Coddy HTML 여정의 JavaScript in Action 섹션에 포함된 레슨 — 27개 중 3번째.

모달(modal)은 사용자의 주의를 끌기 위해 페이지 “위”에 나타나는 작은 창입니다. 주로 로그인 양식, 알림 또는 확인창으로 사용됩니다. 다음과 같은 모습일 수 있습니다:

핵심 아이디어:

모달은 기본적으로 숨겨져 있습니다 (display: none).
“Open” 버튼을 클릭하면 openModal() 함수가 실행되어 display: block으로 설정됩니다.

모달 내부에서 닫기 버튼 (×)은 closeModal() 함수를 실행하여 display: none으로 설정합니다.
종종 모달 외부(어두운 오버레이 부분)를 클릭하여 닫히게 할 수도 있습니다.

<!-- 모달을 여는 버튼 -->
<button onclick="openModal()">모달 열기</button>

<!-- 모달 오버레이 + 콘텐츠 -->
<div id="overlay" style="display:none;">
  <div class="modal">
    <span onclick="closeModal()">×</span>
    <p>이것은 모달 창입니다.</p>
  </div>
</div>

<script>
  function openModal() {
    document.getElementById("overlay").style.display = "block";
  }
  function closeModal() {
    document.getElementById("overlay").style.display = "none";
  }
</script>

챌린지

쉬움

우리는 모달 창에 흥미로운 우주 사실을 보여주는 우주 테마 버튼이 있는 웹페이지를 가지고 있습니다. 우주 사실 버튼을 클릭하면 openModal이라는 함수가 실행됩니다. 여러분의 작업은 모달 창이 보이도록 openModal 내부의 코드를 작성하는 것입니다.

이를 위해 ID가 "fact"인 요소의 display 속성을 "block"으로 설정하세요.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Space Facts – Modal Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Space Facts</h1>
  <p>Click the button below to learn something cool about space.</p>

  <!-- Buttons that open modals -->
  <button onclick="openModal('fact')">Fact 1</button>

  <!-- Overlay + Modal Content -->
  <div id="overlay" class="overlay" onclick="closeModal()">
    <div id="fact" class="modal">
      <span class="close-btn" onclick="closeModal()">×</span>
      <h2>Shooting Stars</h2>
      <p>Shooting stars are actually tiny meteors burning up as they enter Earth’s atmosphere.</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>