當我單擊對話框元素外部顯示的按鈕時,如何觸發單擊事件?
P粉116654495
2023-08-31 23:33:50
<p>我在我的 Vue 3 應用程式中使用原生 HTML 對話方塊元素作為模式,並且透過使用絕對定位成功在模式的側面/外部顯示了一個按鈕。但是,由於對話方塊元素的性質以及它們在頂層的放置方式,當我單擊對話方塊元素外部的按鈕時,我無法觸發單擊事件 (displayNextModal)。調整任一元素的 z-index 都沒有效果,因為預設對話方塊總是位於頂層。我想知道是否有任何解決方法,或者觸發此單擊事件的唯一方法是將按鈕放在對話框元素內。 </p>
<pre class="brush:php;toolbar:false;"><template>
<dialog class="modal-post" ref="postModalRef">
<div>Modal screen</div>
</dialog>
<button class="next-modal-button" @click="displayNextModal">Next</button>
</template></pre>
<pre class="brush:php;toolbar:false;">.modal-post {
width: 500px;
height: 600px;
}
.next-modal-button {
position: absolute;
width: 60px;
height: 30px;
color: black;
top: 50%;
right: 10px;
z-index: 1000;
}</pre></p>
儘管它可能無法將按鈕放置在您想要的確切位置,但您始終可以將對話方塊的邊框和背景設為透明。然後在裡面有一個 div,你將其設定為看起來像對話框。並將按鈕放在對話框本身內。這將使按鈕看起來像在對話框之外,但仍然允許您存取它。不過,您將需要弄亂尺寸和絕對定位。