이번 로또 미션에서 이런 모달창을 구현해야했다.
시맨틱 태그를 최대한 활용하고 싶어서 <dialog>
태그를 사용하기로했다.
<dialog>
: 기본적으로 open 이라는 boolean 속성을 가지고있으며 이 속성에 따라 보여지고 안보여지고가 정해진다.showModal()
: <dialog>
태그에 open 속성을 추가함으로써 모달창처럼 top layer에 띠운다.close()
: <dialog>
태그에서 open 속성을 삭제함으로써 모달창을 닫아주는 인스턴스 메서드이다.::backdrop CSS
: 뷰포트 크기의 상자로, 최상위 레이어에서 표시되는 모든 요소 바로 아래에 렌더링된다. deem을 만들기 위해 따로 html 요소를 만들 필요 없다.위와 같은 유용한 인스턴스 메서드,CSS를 이용해 쉽게 모달창을 구현 할 수 있다.
<body>
<dialog id="modal">
<!-- dialog contents -->
</dialog>
</body>
#modal {
display: flex;
}
처음에 이렇게 구현했는데 showModal(),close()를 정상적으로 호출해도 <dialog>
창이 계속 떠있었다.
#modal에 넣어둔 display: flex; css 속성 때문에, showModal()을 하기도 전에 브라우저에 dialog가 렌더링되어있었다. 심지어 close()를 해도 이 css 속성 때문에 닫히지 않았다.
이유는 css cascading,브라우저 동작 방식,브라우저 기본 스타일의 충돌 때문인것같다...
⚠️
<dialog open>
이 cascading에서 속성 선택자 css로 작동해서 그보다 우선순위인 ID 선택자 CSS에게 먹혀서(?) 안되는건 줄 알았는데,<dialog>
태그의 showModal,close 작동은 css cascading과 관련 없다고한다..
#modal {
/* display: flex; 를 제외한 나머지 CSS들 */
}
dialog:open {
display: flex;
}
이렇게 display css를 속성 선택자 css로 빼왔더니 showModal(),close()가 제대로 작동했다.
`
참고 링크
MDN |<dialog>
: 대화 상자 요소
MDN | HTMLDialogElement: showModal() 메서드
MDN | CSS ::backdrop
MDN | HTMLDialogElement: close() method