ダイアログ要素の外側に表示されるボタンをクリックしたときにクリック イベントをトリガーするにはどうすればよいですか?

Question

Vue 3 アプリケーションでネイティブ HTML ダイアログ要素をモーダルとして使用しており、絶対配置を使用してモーダルの横/外側にボタンを表示することに成功しました。ただし、ダイアログ要素の性質と、ダイアログ要素が最上位に配置される方法により、ダイアログ要素の外側のボタンをクリックしたときにクリック イベント (displayNextModal) を発生させることができません。デフォルトではダイアログ ボックスが常に最前面に表示されるため、どちらの要素の z インデックスを調整しても効果はありません。何か回避策はあるのか、それともこのクリックイベントをトリガーする唯一の方法はダイアログ要素内にボタンを配置することなのか疑問に思っています。

<テンプレート>
  <dialog class="modal-post"ref="postModalRef">
    <div>モーダル画面</div>
  </ダイアログ>
  <button class="next-modal-button" @click="displayNextModal">次</button>
</template>

.modal-post {
  幅: 500ピクセル;
  高さ: 600ピクセル;
}

.next-モーダルボタン {
  位置: 絶対;
  幅: 60ピクセル;
  高さ: 30ピクセル;
  色: 黒;
  トップ: 50%;
  右: 10ピクセル;
  z インデックス: 1000;
}

Answer 1

ボタンを希望の場所に正確に配置できない場合がありますが、ダイアログ ボックスの境界線と背景を常に透明に設定できます。次に、その中にダイアログ ボックスのように見えるように設定した div があります。そしてダイアログ自体の中にボタンを配置します。これにより、ボタンがダイアログ ボックスの外にあるように見えますが、アクセスすることはできます。ただし、サイズと絶対位置をいじる必要があります。

リーリー リーリー リーリー