>  Q&A  >  본문

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

<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>
P粉116654495P粉116654495437일 전571

모든 응답(1)나는 대답할 것이다

  • P粉986028039

    P粉9860280392023-09-01 18:38:39

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

    으아악 으아악 으아악

    회신하다
    0
  • 취소회신하다