모달창을 만들 땐, <dialog>

<dialog> 태그

• 사용자에게 대화 상자나 모달 창을 제공하는 데 사용
• 대화 상자에 표시되는 콘텐츠를 정의하고, JavaScript를 사용하여 조작

---

method (메서드)

1. show()
   : 호출하면 모달창이 나타남
   

<!-- html -->
<dialog class="modal">모달창임
  <button class="close_btn">닫기</button>
</dialog>

<button class="btn">버튼</button>

// js
document.querySelector('.btn').addEventListener('click', function () {
  document.querySelector('.modal').show();
})

2. showModal()
: 호출하면 모달창이 나타남 (닫기 전까지 다른 동작 못함)

<!-- html -->
<dialog class="modal">모달창임
  <button class="close_btn">닫기</button>
</dialog>

<button class="btn">버튼</button>

// js
document.querySelector('.btn').addEventListener('click', function () {
  document.querySelector('.modal').showModal();
})

3. close()
: 호출하면 모달창 닫침 (모달창 내부에 버튼을 만들어 사용)

<!-- html -->
<dialog class="modal">모달창임
  <button class="close_btn">닫기</button>
</dialog>

<button class="btn">버튼</button>

// js
document.querySelector('.close_btn').addEventListener('click', function () {
  document.querySelector('.modal').close();
})

---

property (속성)

• open 속성
  • open = ture 열기 (show() 메서드를 사용한 것과 같음)
  • open = false 닫기 (close() 메서드를 사용한 것과 같음)

<!-- html -->
<dialog class="modal">모달창임
  <button class="close_btn">닫기</button>
</dialog>

<button class="btn">버튼</button>

// js
document.querySelector('.btn').addEventListener('click', function () {
  document.querySelector('.modal').open = true;
})

document.querySelector('.close_btn').addEventListener('click', function () {
  document.querySelector('.modal').open = false;
})