대화 상자 요소 외부에 표시된 버튼을 클릭할 때 클릭 이벤트를 어떻게 트리거할 수 있나요?

Question

저는 Vue 3 애플리케이션에서 기본 HTML 대화 상자 요소를 모달로 사용하고 있으며 절대 위치 지정을 사용하여 모달의 측면/외부에 버튼을 성공적으로 표시했습니다. 그러나 대화 상자 요소의 특성과 최상위 수준에 배치되는 방식으로 인해 대화 상자 요소 외부의 버튼을 클릭하면 클릭 이벤트(displayNextModal)를 실행할 수 없습니다. 대화 상자는 기본적으로 항상 맨 위에 있으므로 요소 중 하나의 Z-색인을 조정해도 아무런 효과가 없습니다. 해결 방법이 있는지 또는 이 클릭 이벤트를 트리거하는 유일한 방법이 대화 상자 요소 안에 버튼을 넣는 것인지 궁금합니다.

<템플릿>
  <대화상자 클래스="modal-post" ref="postModalRef">
    <div>모달 화면</div>
  </대화상자>
  <버튼 클래스="다음-모달-버튼" @click="displayNextModal">다음</button>
</템플릿>

.modal-post {
  너비: 500px;
  높이: 600px;
}

.next-모달-버튼 {
  위치: 절대;
  너비: 60px;
  높이: 30px;
  검정색;
  최고: 50%;
  오른쪽: 10px;
  Z-색인: 1000;
}

Answer 1

원하는 위치에 정확히 버튼을 배치할 수는 없더라도 언제든지 대화 상자의 테두리와 배경을 투명하게 설정할 수 있습니다. 그런 다음 내부에는 대화 상자처럼 보이도록 설정한 div가 있습니다. 대화 상자 자체 안에 버튼을 배치하십시오. 이렇게 하면 버튼이 대화 상자 외부에 있는 것처럼 보이지만 여전히 액세스할 수 있습니다. 하지만 크기와 절대 위치 지정을 엉망으로 만들어야 합니다.

으아악 으아악 으아악