Comment puis-je déclencher un événement de clic lorsque je clique sur un bouton affiché en dehors de l'élément de dialogue ?

Question

J'utilise un élément de dialogue HTML natif comme modal dans mon application Vue 3 et j'ai réussi à afficher un bouton sur le côté/à l'extérieur du modal en utilisant le positionnement absolu. Cependant, en raison de la nature des éléments de dialogue et de la manière dont ils sont placés au niveau supérieur, je ne parviens pas à déclencher l'événement click (displayNextModal) lorsque je clique sur un bouton en dehors de l'élément de dialogue. L'ajustement du z-index de l'un ou l'autre élément n'a aucun effet car la boîte de dialogue est toujours en haut par défaut. Je me demande s'il existe une solution de contournement ou si le seul moyen de déclencher cet événement de clic est de placer le bouton à l'intérieur de l'élément de dialogue.

<template>
  <dialog class="modal-post" ref="postModalRef">
    <div>Écran modal</div>
  </dialogue>
  <button class="suivant-modal-bouton" @click="displayNextModal">Suivant</bouton>
</template>

.modal-post {
  largeur : 500 px ;
  hauteur : 600 px ;
}

.bouton-modal-suivant {
  position : absolue ;
  largeur : 60 px ;
  hauteur : 30px ;
  la couleur noire;
  haut : 50 % ;
  à droite : 10px ;
  indice z : 1000 ;
}

Answer 1

Bien que le bouton ne soit pas placé exactement là où vous le souhaitez, vous pouvez toujours définir les bordures et l'arrière-plan de la boîte de dialogue pour qu'ils soient transparents. Ensuite, à l’intérieur se trouve un div que vous définissez pour ressembler à une boîte de dialogue. et placez le bouton dans la boîte de dialogue elle-même. Cela fera apparaître le bouton en dehors de la boîte de dialogue, mais vous permettra toujours d'y accéder. Vous devrez cependant jouer avec la taille et le positionnement absolu.

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>