02 dialog

🔗https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

모달팝업을 태그로 구현할수 있다. esc 키 를 누르면 창닫기 기능도 지원 한다.

기본형 구현

1
<dialog open>
2
  <p>스크립트 안써도 정말 된다구?</p>
3
  <form method="dialog">
4
    <button>OK</button>
5
  </form>
6
</dialog>

실행화면 ok버튼 클릭시 창이 닫힌다.

오버레이 배경추가

1
<dialog>
2
  <button autofocus>Close</button>
3
  <p>이번엔 배경색 넣기</p>
4
</dialog>
5
<button>얍얍</button>

1
::backdrop {
2
  background-image: linear-gradient(
3
    45deg,
4
    magenta,
5
    rebeccapurple,
6
    dodgerblue,
7
    green
8
  );
9
  opacity: 0.75;
10
}

::backdrop 선택자는 dialog 요소의 배경색을 선택할수 있다. 아주 약간의 자바스크립트를 추가한다

1
const dialog = document.querySelector("dialog");
2
const showButton = document.querySelector("dialog + button");
3
const closeButton = document.querySelector("dialog button");
4

5
// "Show the dialog" button opens the dialog modally
6
showButton.addEventListener("click", () => {
7
  dialog.showModal();
8
});
9

10
// "Close" button closes the dialog
11
closeButton.addEventListener("click", () => {
12
  dialog.close();
13
});

showModal(), close() 는 dialog api 가 제공하는 메서드이다. 실행화면