In my Vue 3 app, I am using the native HTML dialog element as a modal. I have managed to position a button outside of the modal with absolute positioning. However, I am facing an issue where I cannot trigger a click event (displayNextModal) when clicking on the button outside the dialog element. Adjusting the z-index of the elements has no effect as the dialog always stays on the top layer. I am curious if there are any workarounds for this situation, or if the only solution is to place the button inside the dialog element.
<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;
}