dialog tag

HTML <dialog> 요소는 모달 및 비모달 대화 상자를 만드는 데 사용된다.
모달 대화 상자는 나머지 페이지와의 상호작용을 방해하고,
비모달 대화 상자는 나머지 페이지와의 상호작용을 허용한다.

dialog 메서드

JavaScript를 사용하여 요소를 표시해야 한다.
.showModal():모달 대화 상자를 표시하려면 메서드를 사용하고
.show():모달이 아닌 대화 상자를 표시하려면 메서드를 사용한다.
.close()를 사용하여 닫을 수 있고 모달 대화 상자는 키를 눌러 닫을 수도 있다.

dialog 속성

dialog 태그는 기본적으로 보이지 않는다.
open: 대화 상자가 활성화되어 상호 작용할 수 있음을 나타낸다.
속성이 open 설정되지 않으면 대화 상자가 사용자에게 표시되지 않는다.
.show() 또는 .showModal() 메서드를 사용해 모달을 랜더링하는 것이 좋다.

HTML : FORM 태그

dialog 태그안에 form 태그가 들어갈 때 method="dialog"로 설정한다.

<dialog ref={ref} className="result-modal" onClose={onReset}>
      <h2>{userLost ? "You Lost" : `Your score : ${score}`}</h2>
      <p>
        The target was <strong>{targetTime} seconds.</strong>
      </p>
      <p>
        You stopped the timer with{" "}
        <strong>{formattedRestTime} seconds left.</strong>
      </p>
      <form method="dialog" onSubmit={onReset}>
        <button>Close</button>
      </form>
</dialog>

CSS ::backdrop가상 요소

모달 대화 상자의 배경을 스타일링하는 데 사용할 수 있으며, 이 배경은 <dialog>대화 상자가 메서드를 사용하여 표시될 때 요소 뒤에 표시된다.

.result-modal::backdrop {
  background: rgba(0, 0, 0, 0.9);
}

esc 버튼으로 모달창을 나갈 경우

모달안의 나가는 버튼에 이벤트 핸들러를 주어 실행해도 되지만 esc를 눌러 나갈 경우
dialog의 onClose 이벤트 핸들러를 주면 된다.