Bagaimanakah saya boleh mencetuskan acara klik apabila saya mengklik butang yang dipaparkan di luar elemen dialog?

Question

Saya menggunakan elemen dialog HTML asli sebagai modal dalam aplikasi Vue 3 saya dan telah berjaya memaparkan butang ke sisi/luar modal dengan menggunakan kedudukan mutlak. Walau bagaimanapun, disebabkan sifat unsur dialog dan cara ia diletakkan di peringkat atas, saya tidak dapat melancarkan acara klik (displayNextModal) apabila saya mengklik butang di luar elemen dialog. Melaraskan indeks-z bagi mana-mana elemen tidak mempunyai kesan kerana kotak dialog sentiasa berada di atas secara lalai. Saya tertanya-tanya sama ada terdapat sebarang penyelesaian atau satu-satunya cara untuk mencetuskan acara klik ini ialah meletakkan butang di dalam elemen dialog.

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

.modal-post {
  lebar: 500px;
  ketinggian: 600px;
}

.next-modal-button {
  jawatan: mutlak;
  lebar: 60px;
  ketinggian: 30px;
  warna: hitam;
  atas: 50%;
  kanan: 10px;
  indeks z: 1000;
}

Answer 1

Walaupun ia mungkin tidak meletakkan butang tepat di tempat yang anda mahu, anda sentiasa boleh menetapkan sempadan dan latar belakang kotak dialog supaya menjadi telus. Kemudian di dalamnya terdapat div yang anda tetapkan untuk kelihatan seperti kotak dialog. dan letakkan butang di dalam dialog itu sendiri. Ini akan menjadikan butang kelihatan berada di luar kotak dialog, tetapi masih membenarkan anda mengaksesnya. Anda perlu mengacaukan saiz dan kedudukan mutlak, walaupun.

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>