html <dialog>

최근 팝업을 검색하면서 알게된
<dialog>라는 태그를 접하게 되었다.
비교적 쉽게 컨트롤 할 수 있다는 생각에 해당 요소를 연구(?)해보았다.

HTML

<dialog>
팝업
</dialog>

처음부터 열려있기

<dialog open>
	팝업 열려있기
</dialog>

팝업열기

dialog.show();

팝업 Modal과 함께 열기

showModal()로 열게 되면 ESC 단축키가 제공된다.

dialog.showModal();

팝업 닫기

dialog.close();

팝업 ::backdrop 제어

showModal()로 열면 dimmed가 ::backdrop 생성되며 이를 CSS로 제어할 수 있다.

dialog.showModal();

.dialog::backdrop {
  background-color: rgba(255, 0, 0, 0.2);
	backdrop-filter:blur(3px);
}

기존 팝업을 만들때와 다른점은..
단축키가 자동으로 제공된다는것
ESC키만 눌러도 바로 닫힘이 되고
backdrop으로 modal을 컨트롤 할 수 있게 되었다.
또한 tab키를 누르면 버튼에서 바로 팝업까지 focus가 가게 되서 별도의 작업을 하지 않아도 되는 꿀팁!!

그렇다면 실제 난 어떻게 사용해야 될까?

html

<button class="btn-open">열기</button>
<dialog>
선택하이소
<div>
  <button value="1">yes</button>
  <button value="0">no</button>
</div>
</dialog>

js

const Dialog = (option = {}) => {
  const config = {
    dimmed: false,
    ...option,
  };
  const openEl = document.querySelector(".btn-open");
  const dialog = document.querySelector("dialog");
  const dialogBtnEl = document.querySelectorAll("dialog button");

  const isDimmed = () => {
    dialog.showModal();
  };
  const unDimmed = () => {
    dialog.show();
  };

  openEl.addEventListener("click", () => {
    console.log(isDimmed);
    config.dimmed ? isDimmed() : unDimmed();
  });

  dialogBtnEl.forEach((el) => {
    el.addEventListener("click", (event) => {
      let val = Number(event.target.value);
      if (val === 0) {
        dialog.close();
      }
    });
  });
};
Dialog({
  dimmed: true,
});

몇가지를 더 적용해보았는데. 버튼의 역할에 따라 닫히고 닫히지 않는것을 넣어보았다. form을 감싸면 새로고침이 되면서 알아서 닫히긴한다.

그리고 showmodal을 선택적으로 사용할 수 있도록 객체로 옵션을 둬서 만들어보았다.

자바스크립트를 공부한 효과가 나오는듯하다.