<dialog> – HTML 사전

현재의 흐름을 잠시 멈추고 주목을 요구하는 대화창. 자바스크립트로 제어하거나 open 속성을 사용해 표시할 수 있다.

<!-- Dialog 요소 -->
<dialog id="myDialog">
  <h2>안녕하세요!</h2>
  <p>이것은 동적으로 제어되는 대화상자입니다.</p>
  <button class="closeBtn">닫기</button>
</dialog>

<!-- Dialog를 여는 버튼 -->
<button class="openBtn">대화상자 열기</button>

<script>
  // ID가 중복될 수 있으므로 클래스를 사용합니다.
  const openBtn = document.querySelector('.openBtn');
  const closeBtn = document.querySelector('.closeBtn');
  const myDialog = document.getElementById('myDialog');

  openBtn.addEventListener('click', () => {
    myDialog.showModal(); // 모달 형태로 열기
  });

  closeBtn.addEventListener('click', () => {
    myDialog.close(); // 닫기
  });
</script>