ButtonWithModal.html
<button type="button" x-data="{open:false}" x-on:click="open=true">
Modal öffnen
<template x-teleport="body">
<div
x-show="open"
x-on:keydown.escape.prevent.stop="open=false"
role="dialog"
aria-modal="true"
x-id="['modal-title']"
:aria-labelledby="$id('modal-title')"
>
<!-- Overlay -->
<div x-show="open" x-transition.opacity></div>
<!-- Panel -->
<div x-show="open" x-transition x-on:click="open=false">
<div x-on:click.stop x-trap.noscroll.inert="open">
<!-- Title -->
<h2 :id="$id('modal-title')">Titel von dem Modal</h2>
<!-- Content -->
<p>Bist du sicher, dass du lernen möchtest, wie man ein tolles Modal erstellt?</p>
<!-- Buttons -->
<div>
<button type="button" x-on:click="open=false">
Nein, danke
</button>
<button type="button" x-on:click="open=false">
Ja, gerne
</button>
</div>
</div>
</div>
</div>
</template>
</button>