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

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>

Answer 2

将按钮放入模态中并从那里定位。使父级相对定位，然后微调top和right值，以获得您想要的位置。除了position:

，不需要更改对话框类的其他任何内容。

.modal-post {
position: relative;
/* … */
}