dialog 태그로 모달창 구현하기!

안녕하세요! YB 김채은입니다.

2주차 과제를 하면서 모달창 구현 방법에 대해 찾아보다 <dialog> 태그를 알게 되었는데요, 아주 편리하게 모달창을 만들 수 있어 소개해보려 합니다 !!

 

먼저 <dialog> 요소는 HTML5에 추가된 대화 상자 요소로, 기존의 <div>로 만든 대화 상자보다 접근성, 스타일링 측면에서 장점이 많습니다. 예를 들어, 별도의 라이브러리 없이도 모달 창을 쉽게 구현할 수 있고, 페이지의 흐름을 차단하는 모달 모드와 일반 대화 상자로 사용할 수 있어 다양한 사용자 경험을 지원할 수 있습니다.

---

<dialog> 요소의 기본 구조와 사용법

<dialog> 요소는 초기에는 보이지 않고, JavaScript의 show()와 showModal() 메서드를 통해 화면에 표시할 수 있습니다.

 

• open 속성: <dialog> 요소가 화면에 나타나는 상태를 설정하는 속성. open 속성을 추가하면 대화 상자가 보이고, 제거하면 숨겨집니다.
• show() 메서드: 페이지의 흐름을 차단하지 않고 대화 상자를 열 때 사용하는 메서드. 대화 상자가 화면에 나타나지만, 페이지의 다른 요소와 여전히 상호작용이 가능합니다. 알림 메시지나 잠시 화면에 표시할 내용이 있을 때 사용할 수 있습니다.
• showModal() 메서드: 대화 상자를 모달 형식으로 띄워줍니다. 모달 창은 사용자에게 특정 작업을 유도하거나 중요한 정보를 표시하는 데 유용하며, 대화 상자가 열리면 페이지의 나머지 요소는 비활성화됩니다. 
• close() 메서드: 열린 대화 상자를 닫을 때 사용하는 메서드로, show() 또는 showModal()로 열렸던 대화 상자를 닫습니다. 닫힐 때마다 close 이벤트가 발생해, 대화 상자가 닫힌 후의 추가 작업을 처리할 수 있습니다.

---

기본적인 사용 예제

<dialog> 요소를 사용하여 간단한 대화 상자를 열고 닫는 방법을 살펴보겠습니다.

<dialog id="myDialog">
  <p>여기는 대화 상자! 필요한 메시지를 표시하거나 입력을 받을 수 있습니다.</p>
  <button onclick="document.getElementById('myDialog').close()">닫기</button>
</dialog>
<button onclick="document.getElementById('myDialog').show()">대화 상자 열기</button>
<button onclick="document.getElementById('myDialog').showModal()">모달 열기</button>

 

show()와 showModal() 버튼을 클릭하면 각각 일반 대화 상자와 모달 대화 상자를 열 수 있고, 내부의 닫기 버튼을 통해 close() 메서드를 호출하여 대화 상자를 닫을 수 있습니다.

---

스타일링과 접근성

<dialog> 요소는 접근성을 고려하여 제작되었고, 시각 장애가 있는 사용자도 쉽게 접근할 수 있습니다. CSS로 추가적인 스타일링을 할 수도 있으며, 특히 ::backdrop을 사용해서 모달 창의 배경 스타일을 쉽게 조정할 수 있습니다.

dialog::backdrop {
  background-color: rgba(72, 72, 72, 0.5);
}

이 CSS 코드는 모달 대화 상자가 열릴 때 배경을 어둡게 만들어 사용자가 대화 상자에 집중할 수 있게 돕습니다.

---

close 이벤트 활용하기

<dialog> 요소는 close 이벤트를 제공하여 대화 상자가 닫힌 이후의 작업을 처리할 수 있습니다. 예를 들어, 폼 제출 후 대화 상자가 닫힐 때 추가 작업을 하거나, 대화 상자가 닫힌 후 사용자에게 알림을 띄우는 등의 처리가 가능합니다.

const dialog = document.getElementById('myDialog');
dialog.addEventListener('close', () => {
  console.log('대화 상자 닫힘!');
});

이 코드는 close 이벤트를 사용해 대화 상자가 닫힌 후 메시지를 출력합니다. 

---

폼과의 결합

<dialog> 요소는 사용자 입력을 처리하는 폼과도 자주 사용됩니다. <form> 요소와 함께 사용하면 폼 제출 후 대화 상자가 자동으로 닫히도록 설정할 수 있습니다.

<dialog id="formDialog">
  <form method="dialog">
    <p>이름을 입력하세요:</p>
    <input type="text" name="name">
    <button type="submit">확인</button>
  </form>
</dialog>
<button onclick="document.getElementById('formDialog').showModal()">폼 모달 열기</button>

method="dialog"를 사용하면, 폼이 제출되고 대화 상자가 자동으로 닫힙니다. 즉, 사용자 입력을 받고 종료할 수 있는 창을 간단하게 구성할 수 있습니다.