當我單擊對話框元素外部顯示的按鈕時，如何觸發單擊事件？

Question

我在我的 Vue 3 應用程式中使用原生 HTML 對話方塊元素作為模式，並且透過使用絕對定位成功在模式的側面/外部顯示了一個按鈕。但是，由於對話方塊元素的性質以及它們在頂層的放置方式，當我單擊對話方塊元素外部的按鈕時，我無法觸發單擊事件 (displayNextModal)。調整任一元素的 z-index 都沒有效果，因為預設對話方塊總是位於頂層。我想知道是否有任何解決方法，或者觸發此單擊事件的唯一方法是將按鈕放在對話框元素內。

<template>
  <dialog class="modal-post" ref="postModalRef">
    <div>Modal screen</div>
  </dialog>
  <button class="next-modal-button" @click="displayNextModal">Next</button>
</template>

.modal-post {
  width: 500px;
  height: 600px;
}

.next-modal-button {
  position: absolute;
  width: 60px;
  height: 30px;
  color: black;
  top: 50%;
  right: 10px;
  z-index: 1000;
}

Answer 1

儘管它可能無法將按鈕放置在您想要的確切位置，但您始終可以將對話方塊的邊框和背景設為透明。然後在裡面有一個 div，你將其設定為看起來像對話框。並將按鈕放在對話框本身內。這將使按鈕看起來像在對話框之外，但仍然允許您存取它。不過，您將需要弄亂尺寸和絕對定位。

const favDialog = document.querySelector('.modal-post');
const showButton = document.querySelector('#showButton');
const nextButton = document.querySelector('.next-modal-button');


showButton.addEventListener('click', () => {
    favDialog.showModal();
});

nextButton.addEventListener('click', () => {
    console.log("NEXT");
});

.modal-post {
  border:0;
  background:transparent;
  height:100%
}

.next-modal-button {
  position: absolute;
  width: 60px;
  height: 30px;
  color: black;
  bottom: 20px;
  right: 10px;
  z-index: 1000;
}

.modal-body{
  background:#fff;
  border:1px solid #000;
  padding:10px;
  width: 500px;
  height: 280px;
}

<dialog class="modal-post" ref="postModalRef">
    <div class="modal-body">Modal screen</div>
    <button class="next-modal-button" @click="displayNextModal">Next</button>
  </dialog>  
  <button id="showButton">Show</button>