当我单击对话框元素外部显示的按钮时，如何触发单击事件？

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>