<dialog> showModal(),close() 동작 안할 때

리버 river·2024년 3월 4일
0

트러블 슈팅

목록 보기
2/3

이번 로또 미션에서 이런 모달창을 구현해야했다.
시맨틱 태그를 최대한 활용하고 싶어서 <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,브라우저 동작 방식,브라우저 기본 스타일의 충돌 때문인것같다...

css cascading

  1. 인라인 스타일: HTML 요소에 직접 적용된 스타일 (style 속성 사용)이 가장 높은 우선순위를 가진다.
  2. ID 선택자: #id 형태의 선택자가 다음으로 높은 우선순위를 가집니다.
  3. 클래스, 의사 클래스 및 속성 선택자: .class, :pseudo-class, [attribute] 형태의 선택자가 이에 해당합니다.
  4. 요소(태그) 및 의사 요소 선택자: element, ::pseudo-element 형태의 선택자입니다.
  5. 범용 선택자 (*), 관계 선택자 (+, >, ~): 가장 낮은 우선순위를 가집니다.
  6. 브라우저 기본 스타일 : 제일 꼴지다.

⚠️ <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

profile
프론트엔드 개발자

0개의 댓글

관련 채용 정보