대화 상자 요소 외부에 표시된 버튼을 클릭할 때 클릭 이벤트를 어떻게 트리거할 수 있나요?
<p>저는 Vue 3 애플리케이션에서 기본 HTML 대화 상자 요소를 모달로 사용하고 있으며 절대 위치 지정을 사용하여 모달의 측면/외부에 버튼을 성공적으로 표시했습니다. 그러나 대화 상자 요소의 특성과 최상위 수준에 배치되는 방식으로 인해 대화 상자 요소 외부의 버튼을 클릭하면 클릭 이벤트(displayNextModal)를 실행할 수 없습니다. 대화 상자는 기본적으로 항상 맨 위에 있으므로 요소 중 하나의 Z-색인을 조정해도 아무런 효과가 없습니다. 해결 방법이 있는지 또는 이 클릭 이벤트를 트리거하는 유일한 방법이 대화 상자 요소 안에 버튼을 넣는 것인지 궁금합니다. </p>
<pre class="brush:php;toolbar:false;"><템플릿>
<대화상자 클래스="modal-post" ref="postModalRef">
<div>모달 화면</div>
</대화상자>
<버튼 클래스="다음-모달-버튼" @click="displayNextModal">다음</button>
</템플릿></pre>
<pre class="brush:php;toolbar:false;">.modal-post {
너비: 500px;
높이: 600px;
}
.next-모달-버튼 {
위치: 절대;
너비: 60px;
높이: 30px;
검정색;
최고: 50%;
오른쪽: 10px;
Z-색인: 1000;
}</pre></p>