Wie kann ich ein Klickereignis auslösen, wenn ich auf eine Schaltfläche klicke, die außerhalb des Dialogelements angezeigt wird?

Question

Ich verwende ein natives HTML-Dialogelement als Modal in meiner Vue 3-Anwendung und habe mithilfe der absoluten Positionierung erfolgreich eine Schaltfläche seitlich/außerhalb des Modals angezeigt. Aufgrund der Art der Dialogelemente und der Art und Weise, wie sie auf der obersten Ebene platziert sind, kann ich das Klickereignis (displayNextModal) jedoch nicht auslösen, wenn ich auf eine Schaltfläche außerhalb des Dialogelements klicke. Das Anpassen des Z-Index eines der Elemente hat keine Auswirkung, da das Dialogfeld standardmäßig immer oben angezeigt wird. Ich frage mich, ob es eine Problemumgehung gibt oder ob die einzige Möglichkeit, dieses Klickereignis auszulösen, darin besteht, die Schaltfläche in das Dialogelement einzufügen.

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

.modal-post {
  Breite: 500px;
  Höhe: 600px;
}

.next-modal-button {
  Position: absolut;
  Breite: 60px;
  Höhe: 30px;
  Farbe: Schwarz;
  oben: 50 %;
  rechts: 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>