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